由网友(放开那个帅哥让我来)分享简介：在实时分析中，您可能想明确指出，今天还没有结束，当天的数据不完整.In real time analytics, you might want to state explicitly, that the present day has not been over yet and the data for the da...

在实时分析中，您可能想明确指出，今天还没有结束，当天的数据不完整.

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.

这就是 Mixpanel 的做法.

This is how Mixpanel does it.

这可以使用 Chart JS v2 pre-alpha 完成吗?

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

推荐答案

是的，但你必须解决一些小故障

Yes, but you have to work around a couple of 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
            }
        }
    }
});

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

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://jsfiddle.net/uwb8357r/