我们可以在其中绘制实线和虚线的折线图吗？

In real time analytics, you might want to state explicitly, that the present day has not been over yet and the data for the day is incomplete.

在实时分析中，您可能希望明确声明当前的日期尚未结束且当天的数据不完整。

So, you might want to draw the line that joins the last and the penultimate point with a dotted stroke.

因此，您可能希望使用虚线笔划绘制连接倒数第二个点的线。

This is how Mixpanel does it.

这就是Mixpanel的工作方式。

Can this be done using the Chart JS v2 pre-alpha?

可以使用Chart JS v2 pre-alpha来完成吗？

1 个解决方案

#1

Yes, but you have to work around a couple of glitches

是的，但你必须解决几个问题

Warning: Sub-optimal example to work around glitches

var lineChartData = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, 3, 4],
        borderColor: '#66f',
        borderDash: [20, 30]
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
    }]
};

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: lineChartData,
    options: {
        elements: {
            line: {
                fill: false
            }
        }
    }
});

Notice that the first dataset doesn't have the values set to blank and that 2nd dataset has one extra value than required - these effectively work around a couple of glitches (including https://github.com/nnnick/Chart.js/issues/1284)

请注意，第一个数据集没有将值设置为空白，并且第二个数据集有一个超出要求的额外值 - 这些有效地解决了几个问题（包括https://github.com/nnnick/Chart.js/issues / 1284）

---

Fiddle - https://jsfiddle.net/uwb8357r/

小提琴 - https://jsfiddle.net/uwb8357r/