Question

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

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

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

感谢您的时间。

Answer 1

扩展图表以绘制线条（请参阅Chart.js — drawing an arbitrary vertical line）并使用空值隐藏线段，如此

预览

<强>脚本

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/

Answer 2

我无法帮助处理多个数据集（除非同意它应该起作用的评论）但是关于您的请求＆＃34; 我也想画一条垂直线在共享画布上的每个图形之间，以进一步区分数据集。＆＃34;我写了一些粗略的代码，在我的图表顶部绘制线条，这可能是一个有用的起点。我正在扩展条形图，您希望扩展折线图，但这应该是下面代码中的简单文本替换。

Chart.types.Bar.extend({
    name: 'BarOverlay',
    draw: function (ease) {

        // First draw the main chart
        Chart.types.Bar.prototype.draw.apply(this);

        var ctx = this.chart.ctx;

        var barWidth = this.scale.calculateBarWidth(this.datasets.length);

        for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {

            var overlayBar = this.options.verticalOverlayAtBar[i];

            // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
            var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
            var y = this.scale.calculateY(2000);

            var bar_base = this.scale.endPoint

            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(x, bar_base);
            ctx.lineTo(x, y);
            ctx.stroke();
        }
        ctx.closePath();
    }
});

这还需要更改选项结构以存储叠加坐标列表：

// Add an array of columns at which a vertical line should be drawn
verticalOverlayAtBar: []

请注意，我的条形图是垂直的而不是水平的。

要使用此功能，我会像往常一样设置图表，但调用我的叠加方法而不是基本图表：

var ctx = $("#PdCallHistoryChart").get(0).getContext("2d");
var PdHistoryChart = new Chart(ctx).BarOverlay(PdChartData, HistoryChartDefaults);

叠加逻辑绘制主图表，然后可以自由使用画布并可以访问基础图形的属性，因此可以根据绘制的数据计算偏移量。

这是相当粗略的，所以任何Chart.js专家都可以随意批评。

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

2 个答案: