Chart.js：帶有部分虛線的折線圖

我正在嘗試繪製一條應該顯示部分實線和部分虛線（以表示實際和預期數據）的折線圖。我發現這個例子中，關於版本2.0.0-αChart.js：帶有部分虛線的折線圖

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版本，因爲當前版本中解決了其他錯誤。任何方式複製第一個片段與發佈版本的圖形？

來源

2016-05-23 Marco Lepore

如果你整個數據添加到衝向... – vaso123

@lolka_bolka虛線已經擁有所有的數據點，但它不正確地重疊，你可以看到後面的一部分實線 –

一個解決方案可能是：將數據集（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/

來源

2016-06-20 10:27:07

Chart.js：帶有部分虛線的折線圖

回答

相關問題