我们可以绘制一个既有实线又有虚线的折线图吗？

Question

在实时分析中，您可能希望明确指出，今天尚未结束，当天的数据不完整。

因此，您可能想用虚线绘制连接最后一个点和倒数第二个点的线。

这就是 Mixpanel 的做法。

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

Answer 1

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

警告：解决故障的次优示例

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 )

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