chart.js 每个部分具有不同背景颜色的折线图

Question

假设我有一个 4 周的周一至周五折线图。我希望将这 4 周分成几个部分。我希望第一个星期一到星期五的背景色为白色。第二个星期一到星期五灰色背景。第三个又是一个白色的背景。而第四周的星期一到星期五要有灰色背景色。我所说的是图表的背景。有办法吗？

Answer 1

我会尝试一些变通方法，我会绘制一个图像，每行四行，宽度为 1px，颜色不同；然后在 CSS sheet 中定义：

canvas {
    background-image: url(backgroundimage.jpg);
    background-size: contain;
}

Answer 2

Chart.js 在绘制（或重新绘制）图表之前清除 canvas。

图表清理完毕后，我们就可以着手绘制背景了。只需扩展折线图并覆盖初始化覆盖中的清除功能。

预览

脚本

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);
        }
    }
});

然后只使用 LineAlt 而不是 Line

var myNewChart = new Chart(ctx).LineAlt(data);

Fiddle - http://jsfiddle.net/oe2606ww/

Answer 3

这里的一些人请求了一些适用于更高版本的东西，这是我在 ChartJS 2.7.2 上运行的一起破解的解决方案（编辑：2020 年 4 月：也是 2.9.3）并且可能会被改编。 Chart.types.Line.extend 在上面的答案中使用，在 v2 中似乎无效。

我在 to get the plugin code, and also found this thread 的帮助下设法解决了这个问题，这对收集数据点的坐标很有用。

通过一些工作，这个 fiddle 应该允许您通过以下代码将标签数组键作为 start/stop 位置传递（其中 0 和 1 是键）：

var start = meta.data[0]._model.x;
var stop  = meta.data[1]._model.x;

您可以将此循环与 ctx.fillRect 函数一起绘制多个矩形。

这是工作 fiddle：http://jsfiddle.net/oe2606ww/436/

Answer 4

我将@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);
    }
});

然后您可以像@potatopeelings 的解决方案一样使用自定义图表类型：

var myNewChart = new Chart(ctx, {type: 'LineAlt', data: data});

chart.js 每个部分具有不同背景颜色的折线图

chart.js Line chart with different background colors for each section

javascript

chart.js