chart.js中折线图的背景颜色

Question

我想更改 chart.js 生成的折线图的背景颜色。似乎没有这个选项，文档也没有帮助。在互联网上广泛搜索没有产生任何结果。这可能吗？

我必须承认我对 HTML5 画布了解不多，所以我有点挣扎！

原文由 serlingpa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Chart.js v2.1，您可以编写自己的插件来执行此操作

---

预习

---

脚本

Chart.pluginService.register({
    beforeDraw: function (chart, easing) {
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
            var helpers = Chart.helpers;
            var ctx = chart.chart.ctx;
            var chartArea = chart.chartArea;

            ctx.save();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});

接着

...
options: {
    chartArea: {
        backgroundColor: 'rgba(251, 85, 85, 0.4)'
    }
}
...

---

小提琴 - http://jsfiddle.net/rrcd60y0/

原文由 potatopeelings 发布，翻译遵循 CC BY-SA 3.0 许可协议