chart.js每个部分的不同背景颜色的折线图 [英] chart.js Line chart with different background colors for each section

问题描述

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

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?

推荐答案

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

Chart.js clears the canvas before drawing (or redrawing) a chart.

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

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.

预览

脚本

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

Then just use LineAlt instead of Line

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

---

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

这篇关于chart.js每个部分的不同背景颜色的折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！