我们可以绘制一个包含实线和虚线的折线图吗?

Can we draw a Line Chart with both solid and dotted line in it?(我们可以绘制一个包含实线和虚线的折线图吗?)

问题描述

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

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/

这篇关于我们可以绘制一个包含实线和虚线的折线图吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！