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/