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

一种解决方案可以是:当数据集(1)的值不可见时将其设置为空.这条线不会产生贝塞尔曲线,这是不方便的.

例:

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/