Javascript chart.js 中折线图的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37144031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background colour of line charts in chart.js
提问by serlingpa
I would like to change the background colour of the line graph produced by chart.js. There doesn't appear to be an option for this, and the documentation doesn't help. Extensive searching on the interweb has yielded no results. Is this possible?
我想更改chart.js 生成的折线图的背景颜色。似乎没有这个选项，文档也没有帮助。在互联网上广泛搜索没有结果。这可能吗？
I must confess I don't really know much about the HTML5 canvas so I'm struggling a bit!
我必须承认我对 HTML5 画布不太了解，所以我有点挣扎！
回答by potatopeelings
With v2.1 of Chart.js, you can write your own plugin to do this
使用 Chart.js v2.1，您可以编写自己的插件来执行此操作
Preview
预览
Script
脚本
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();
}
}
});
and then
进而
...
options: {
chartArea: {
backgroundColor: 'rgba(251, 85, 85, 0.4)'
}
}
...
Fiddle - http://jsfiddle.net/rrcd60y0/
回答by Linus
I'm not sure what you mean by "the background color of the main area of the graph that isn't occupied with the line chart", but you can set the background-color of the canvas via CSS:
我不确定“没有被折线图占据的图形主要区域的背景颜色”是什么意思，但是您可以通过 CSS 设置画布的背景颜色：
#myChart {
background-color: #666;
}
Look at this fiddleto see how it affects the chart.
看看这个小提琴，看看它如何影响图表。
This will set the background for the whole canvas, if you only want to set it for the inner part, check out potatopeelings solution.
这将为整个画布设置背景，如果您只想为内部部分设置它，请查看potatopeelings 解决方案。
回答by niksi
Just to help others who are thinking how to add multiple background colors: I modified a little bit @potatopeelings answer. First I checked how many columns there are
只是为了帮助正在考虑如何添加多种背景颜色的其他人：我修改了一点@potatopeelings 的答案。首先我检查了有多少列
var columnCount = chart.data.datasets[0].data.length;
var width = chartArea.right - chartArea.left;
var columnWidth = width/columnCount;
and then fill every other of them with background color
然后用背景颜色填充它们中的每一个
while (startPoint < chartArea.right) {
ctx.fillRect(startPoint, chartArea.top, columnWidth, height);
startPoint += columnWidth * 2;
}
For my chart this works better but for this the July column is for some reason only part of it. Doesn't know how to fix that but hopefully you can get idea from here.
对于我的图表，这效果更好，但出于某种原因，7 月列只是其中的一部分。不知道如何解决这个问题，但希望你能从这里得到想法。
回答by Santiago Bendavid
Try doing this:
尝试这样做：
var ctx = $("#myChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {backgroundColor:'rgb(10,10,10)'}
});
