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

Question

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

Answer 1

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/