使用Chart.js设置条形图和线条的样式

我们已经使用Chart.js好几个月了，喜欢它给我们带来的轻松编程的能力。我们希望开始向Chart.js生成的图表中添加的一件事情是，我们生成的图表的样式稍微好一点。我们使用的大多数图表都是条形图，还有一些折线图

当我使用“造型”这个术语时，我真正要说的是使横条或线条看起来更漂亮一点。具体来说，我想在条形图和折线图后面添加阴影，甚至在条形图上添加斜角

我看了很多问题，似乎找不到我要找的东西。我自己也做了一些实验，修改了Chart.js文件，在javascript中添加了阴影和模糊，但我没有将其添加到正确的位置。我将这些更改放在Chart.Element.extend draw函数中：

ctx.shadowColor = '#000';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;

我把它放在ctx.fill（）的前面，它几乎满足了我的要求。结果是，我得到了一个阴影，在我正在绘制的条形图和折线图上看起来都很好，但在x轴和y轴的标签上也得到了阴影，这看起来不太好。我想让阴影只出现在横条和线条上，而不是标签上

如果您能提供任何帮助，我们将不胜感激。我没有javascript方面的经验，但我已经能够完成相当多的编码，如果没有堆栈溢出方面的所有人的帮助，我将无法完成。

为折线图添加阴影 可以扩展折线图类型来执行此操作

---

预览

---

脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        var originalStroke = ctx.stroke;
        ctx.stroke = function () {
            ctx.save();
            ctx.shadowColor = '#000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 8;
            ctx.shadowOffsetY = 8;
            originalStroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

然后

...
var myChart = new Chart(ctx).LineAlt(data, {
    datasetFill: false
});

---

---

Fiddle-

这适用于新版本的Chart JS 我们可以创建一个插件对象并注册到chart JS，插件是开发者在创建图表时修改图表的一种方式，仅供参考，请查看

向任何图表添加阴影的示例插件

var simpleplugin = {
beforeDraw : function(chartInstance)
{

    let _stroke = chartInstance.ctx.stroke;
    chartInstance.ctx.stroke = function () {

        chartInstance.ctx.save();
        chartInstance.ctx.shadowColor = 'gray';
        chartInstance.ctx.shadowBlur = 10;
        chartInstance.ctx.shadowOffsetX = 2;
        chartInstance.ctx.shadowOffsetY = 2;
        _stroke.apply(this, arguments)
        chartInstance.ctx.restore();
    }

    let _fill = chartInstance.ctx.fill;
    ctx.fill = function () {

        chartInstance.ctx.save();
        chartInstance.ctx.shadowColor = 'gray';
        chartInstance.ctx.shadowBlur = 10;
        chartInstance.ctx.shadowOffsetX = 2;
        chartInstance.ctx.shadowOffsetY = 2;
        _fill.apply(this, arguments)
        chartInstance.ctx.restore();
    }
}

}

$(function()
{
    Chart.pluginService.register(simpleplugin);
});

---

试过了吗？土豆皮，谢谢！这件事怎么没有被评为令人震惊。在10个阴影答案中，这是唯一一个最简单但更重要的是唯一有效的答案。非常感谢。你能扩展饼图吗？你能解释一下你用ctx.stroke做了什么吗？文档说它可以接收一个Path2D，但是你可以传递一个自定义函数。谢谢你的回答@MiguelPéres-我用猴子修补了它-基本上用我自己的一个实现替换了实际的实现，在调用我存储在

originalStroke

中的原始实际实现之前，它做了一些其他的事情。我尝试了这个解决方案，它可以工作，但我也得到了网格上的蓝色阴影。。。我做错了什么？