Question

让我说我有一个与星期五的折线图4周。我希望这4周分为几个部分。我希望星期一的第一个星期一有白色背景颜色。星期五的第二个星期一灰色背景。再次出现白色bg。星期一到星期五的第四周有一个灰色的背景色。我所说的是图表的背景。有没有办法做到这一点？

Answer 1

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

我们可以跳过这个并在图表清除后绘制我们的背景。只需扩展折线图并覆盖初始化覆盖中的清除功能。

预览

<强>脚本

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

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

Answer 2

这里的一些人已经要求一些适用于更高版本的东西，这里是我的黑客攻击解决方案，适用于ChartJS 2.7.2并且可能适用。在上面的答案中使用的'Chart.types.Line.extend'在v2中似乎没有效。

graph with background relvant to x

我设法在this thread的帮助下解决这个问题以获取插件代码，并且还发现this thread对于收集数据点的坐标非常有用。

通过一些工作，这个小提琴应该允许你通过以下代码传递标签数组键作为开始/停止位置（其中0和1是键）：

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

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

这是小提琴：http://jsfiddle.net/oe2606ww/436/

编辑：我已经更新了小提琴，因为我错过了一些东西。绘制矩形的线应如下所示：

ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);

（传递给fillRect的第一个参数应该是'start'而不是'stop'）

Answer 3

我试着做一些工作，我会画一个四行的图像，每行宽度为1px，颜色不同;然后在CSS表格中定义：

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

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每个部分的不同背景颜色的折线图

4 个答案: