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

Question

我想改变由chart.js生成的折线图的背景颜色。似乎没有这个选项，并且文档也没有帮助。在互联网上进行了广泛搜索，但没有结果。这是否可能？

我必须承认我对HTML5画布并不是很了解，所以有些困难！

- serlingpa

---

你使用的是哪个图表插件？ - Suresh

可能是重复的问题，与https://dev59.com/j10a5IYBdhLWcg3wVHTU相同。 - Regis Portalez

不，Regis，这是另一个问题。 - serlingpa

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)'
    }
}
...

---

JSFiddle - http://jsfiddle.net/rrcd60y0/

---

- potatopeelings

---

非常感谢您提供这个出色的答案！ - Joe

谢谢！这给了我一个线索，让我为图表绘制交替列背景颜色！ - Clayton

看起来红色背景正在线条前面绘制，即使使用了“beforeDraw”。是这样吗，还是只是浅灰色？ - Miguel Péres

你好！这个很好用，但是有没有办法使用这个插件在图表背景中有不同颜色的列？我尝试将“backgroundColor”选项变成数组并添加更多颜色，但是它没有起作用。 - Brian

Answer 2

我不确定你所说的“未被线图占据的图表主区域的背景颜色”，但是你可以通过CSS设置画布的背景颜色：

#myChart {
  background-color: #666;
}

请查看此示例，以了解其如何影响图表。

这将为整个画布设置背景，如果您只想为内部部分设置背景，请查看potatopeelings的解决方案。

- Linus

---

当你想要保存图表的PNG时，这种方法不起作用，因为画布是透明的。 - FizxMike

Answer 3

为了帮助其他想要添加多个背景颜色的人： 我稍微修改了@potatopeelings的答案。首先，我检查了有多少列。

var columnCount = chart.data.datasets[0].data.length;
var width = chartArea.right - chartArea.left;
var columnWidth = width/columnCount;

然后用背景颜色填充每个其他的单元格。

while (startPoint < chartArea.right) {
    ctx.fillRect(startPoint, chartArea.top, columnWidth, height);
    startPoint += columnWidth * 2;
}

对于我的图表，这个方法效果更好，但是7月份的列只显示了部分。不知道如何修复，但希望您能从这里得到想法。

http://jsfiddle.net/e7oy6yk6/2

- niksi