javascript - Chart.js:带部分虚线的折线图

Question

我正在尝试绘制折线图，​​该折线图应显示一条部分实线和部分虚线(以表示真实数据和预期数据)。我发现这个例子在 2.0.0-alpha 版本上完美运行

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],
        pointBackgroundColor: "transparent"
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
        pointBackgroundColor: "transparent"
    }]
};

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

<script src="https://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script>
<canvas id="chart"/>

但是当我用当前的 2.1.3 版本运行相同的代码时，线条没有正确重叠(在点 D 和 E 之间):

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],
        pointBackgroundColor: "transparent"
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
        pointBackgroundColor: "transparent"
    }]
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="chart"/>

不幸的是，由于当前版本中已解决的其他错误，我无法使用 alpha 版本。有什么方法可以用发布版本复制第一个片段中的图表？

Answer 1

一个解决方案可能是:在 dataset(1) 不可见时将其值设置为 null。这条线不会创建贝塞尔曲线，这很不方便。

例子:

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

};

https://jsfiddle.net/scs_3/8qqv69ot/