Chart.js - 创建自定义图表类型

Question

我想创建一个Linegraph,它可以分别渲染3个不同的数据集.y轴是共享的.

例如,前4个点属于数据集1(绿色),接下来的7个点属于数据集2(黄色),后9个点属于数据集3(红色).每个数据集中的行不连接.我还想在共享画布上的每个图形之间绘制一条垂直线,以进一步区分数据集.

每个折线图有3个画布元素并没有为我剪切.Chart.JS文档不清楚如何进行这种类型的自定义.我希望有任何帮助让我自己走上正确的代码.

感谢您的时间.

Answer 1

扩展图表以绘制线条(请参见Chart.js - 绘制任意垂直线条)并使用空值隐藏线段,如此

预习

脚本

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var scale = this.scale

        // draw lines
        this.chart.ctx.save();
        this.chart.ctx.strokeStyle = '#ff0000';

        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(scale.calculateX(1.5), scale.startPoint);
        this.chart.ctx.lineTo(scale.calculateX(1.5), scale.endPoint);
        this.chart.ctx.stroke();

        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(scale.calculateX(6.5), scale.startPoint);
        this.chart.ctx.lineTo(scale.calculateX(6.5), scale.endPoint);
        this.chart.ctx.stroke();

        this.chart.ctx.restore();
    }
});

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [28, 48, null, null, null, null, null, null, null]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [null, null, 40, 19, 86, 27, 90, null, null]
        },
        {
            label: "My Third dataset",
            fillColor: "rgba(151,205,187,0.2)",
            strokeColor: "rgba(151,205,187,1)",
            pointColor: "rgba(151,205,187,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,205,187,1)",
            data: [null, null, null, null, null, null, null, 24, 32]
        }
    ]
};

var ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx).LineAlt(data);

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