javascript chart.js 折线图，每个部分的背景颜色不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31244698/
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
chart.js Line chart with different background colors for each section
提问by user3726562
Lets say I have a Line chart with mon-fri for 4 weeks. I want that these 4 weeks are diveded in sections. I want the first monday to friday have a white background color. The second monday to friday a gray background. The thirth a white bg again. And the fourth weeks with monday to friday to have a gray background color. What Im talking about is the background of the graph. Is there a way to do this?
假设我有一个 mon-fri 的折线图，为期 4 周。我希望这 4 周被分成几个部分。我希望第一个星期一到星期五有一个白色的背景颜色。第二个星期一至星期五为灰色背景。第三个又是白bg。而第四周周一至周五的背景色为灰色。我在谈论的是图表的背景。有没有办法做到这一点？
回答by potatopeelings
Chart.js clears the canvas before drawing (or redrawing) a chart.
Chart.js 在绘制（或重绘）图表之前清除画布。
We can jump in on this and draw our background once the chart is cleared. Just extend the Line chart and override the clear function in the initialize override.
一旦图表被清除，我们可以跳进去并绘制我们的背景。只需扩展折线图并覆盖初始化覆盖中的清除功能。
Preview
预览
Script
脚本
Chart.types.Line.extend({
name: "LineAlt",
initialize: function(data){
Chart.types.Line.prototype.initialize.apply(this, arguments);
// keep a reference to the original clear
this.originalClear = this.clear;
this.clear = function () {
this.originalClear();
// 1 x scale unit
var unitX = this.datasets[0].points[1].x - this.datasets[0].points[0].x;
var yTop = this.scale.startPoint;
var yHeight = this.scale.endPoint - this.scale.startPoint;
// change your color here
this.chart.ctx.fillStyle = 'rgba(100,100,100,0.8)';
// we shift it by half a x scale unit to the left because the space between gridline is actually a shared space
this.chart.ctx.fillRect(this.datasets[0].points[5].x - 0.5 * unitX, yTop, unitX * 5, yHeight);
this.chart.ctx.fillRect(this.datasets[0].points[15].x - 0.5 * unitX, yTop, unitX * 5, yHeight);
}
}
});
Then just use LineAlt instead of Line
然后只需使用 LineAlt 而不是 Line
var myNewChart = new Chart(ctx).LineAlt(data);
Fiddle - http://jsfiddle.net/oe2606ww/
回答by v25
Some people here have requested something that works for later versions, here's my hacked together solution that works on ChartJS 2.7.2 (EDIT: Apr 2020: Also 2.9.3)and could probably be adapted. Chart.types.Line.extendused in the answer above, doesn't seem to be valid in v2.
这里的一些人要求一些适用于更高版本的东西，这是我在 ChartJS 2.7.2 （编辑：2020 年 4 月：也是 2.9.3）上工作的黑客组合解决方案，并且可能会进行调整。 Chart.types.Line.extend在上面的答案中使用，似乎在 v2 中无效。
I managed to figure this out with help from this threadto get the plugin code, and also found this threaduseful for gathering co-ordinates of the data points.
我设法在此线程的帮助下解决了此问题以获取插件代码，并且还发现此线程对于收集数据点的坐标很有用。
With some work this fiddle should allow you to pass the label array keys as start/stop positions via the following code (where 0 and 1 are the keys):
通过一些工作，这个小提琴应该允许您通过以下代码将标签数组键作为开始/停止位置传递（其中 0 和 1 是键）：
var start = meta.data[0]._model.x;
var stop = meta.data[1]._model.x;
You could loop this, along with the ctx.fillRectfunction to draw multiple rectangles.
你可以循环这个，以及ctx.fillRect绘制多个矩形的函数。
Here's the working fiddle: http://jsfiddle.net/oe2606ww/436/
这是工作小提琴：http: //jsfiddle.net/oe2606ww/436/
回答by Mike Bogochow
I combined @potatopeelings's and @v25's solutions for a chart.js v2 solution. It utilizes the format of @potatopeelings's solution, allowing to use an alternate chart type (LineAlt), and the updated implementation from @v25's solution.
我将@potatopeelings 和@v25 的解决方案结合起来用于chart.js v2 解决方案。它利用@potatopeelings 解决方案的格式，允许使用替代图表类型（LineAlt），以及@v25 解决方案的更新实现。
Chart.controllers.LineAlt = Chart.controllers.line.extend({
draw: function (ease) {
if (this.chart.config.options.chartArea && this.chart.config.options.chartArea.backgroundColor) {
var ctx = this.chart.chart.ctx;
var chartArea = this.chart.chartArea;
var meta = this.chart.getDatasetMeta(0);
var start = meta.data[1]._model.x;
var stop = meta.data[2]._model.x;
ctx.save();
ctx.fillStyle = this.chart.config.options.chartArea.backgroundColor;
ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);
ctx.restore();
}
// Perform regular chart draw
Chart.controllers.line.prototype.draw.call(this, ease);
}
});
Then you can use the custom chart type just as in @potatopeelings's solution:
然后您可以使用自定义图表类型，就像在@potatopeelings 的解决方案中一样：
var myNewChart = new Chart(ctx, {type: 'LineAlt', data: data});
回答by Sabba
I'd try a little work around,I'd draw an image with four line each one with width 1px and a different color; then in a CSS sheet define:
我会尝试一些解决方法，我会绘制一个四行图像，每行宽度为 1px，颜色不同；然后在 CSS 表中定义：
canvas {
background-image: url(backgroundimage.jpg);
background-size: contain;
}
