Chart.js中的行格式用於垂直步驟
[英]Line formatting in Chart.js for vertical steps
問題描述
我有一個很大的數據集，在繪制圖形時有幾個垂直部分，如下所示。 Chart.js用半透明的稀薄顏色格式化這些部分。 我想格式化它們以匹配常規，粗線和實線樣式。
數據集本身通常位於一個名為data.js的單獨文件中，但我將其一部分與CodePen鏈接在一起。
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <!-- NOT USED FOR THIS EXAMPLE <script src="data.js"></script> --> <script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script> </head> <body> <canvas id="myChart"></canvas> </body> <style> canvas { width: 100% !important; max-width: 2000px; height: auto !important; } </style> <script> var labels = jsonfile.jsonarray.map(function(e) { return e.Time; }); var data = jsonfile.jsonarray.map(function(e) { return e.Speed; }); var ctx = myChart.getContext('2d'); var config = { options: { legend: { position: 'bottom', }, scales: { xAxes: [{ scaleLabel: { fontSize: 12, fontStyle: 'bold', display: true, labelString: 'Y(1)' }, ticks: { autoSkip: true, maxTicksLimit: 30, }, }], }, }, type: 'line', data: { labels: labels, datasets: [{ fill: false, label: 'Graph Line', data: data, backgroundColor: 'rgba(0, 119, 204, 0.3)' }] } }; var chart = new Chart(ctx, config); </script> </html>
1 個解決方案
解決方案1
0 已采納 2018-05-22 14:34:04
我弄清楚了，當您查看圖表時所看到的實際上實際上只是單個點。 由於大量的點數據，起初並不明顯，但是線比點的寬度還細。
垂直線要細得多，實際上是因為這些垂直線是使用行設置進行格式化的。 通過將點顏色和邊框的透明度設置為0，並通過重新設置線條設置的格式，我能夠按照自己的預期方式對其進行格式化。 如果將來其他任何人遇到類似問題，請參考以下示例。
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <!-- NOT USED FOR THIS EXAMPLE <script src="data.js"></script> --> <script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script> </head> <body> <canvas id="myChart"></canvas> </body> <style> canvas { width: 100% !important; max-width: 2000px; height: auto !important; } </style> <script> var labels = jsonfile.jsonarray.map(function(e) { return e.Time; }); var data = jsonfile.jsonarray.map(function(e) { return e.Speed; }); var ctx = myChart.getContext('2d'); var config = { options: { legend: { position: 'bottom', }, scales: { xAxes: [{ scaleLabel: { fontSize: 12, fontStyle: 'bold', display: true, labelString: 'Y(1)' }, ticks: { autoSkip: true, maxTicksLimit: 30, }, }], }, }, type: 'line', data: { labels: labels, datasets: [{ lineTension: 0.4, //defaul val = 0.4 pointBackgroundColor: 'rgba(0,0,0,0)', pointBorderColor: 'rgba(0,0,0,0)', borderColor: 'black', borderWidth: 4, fill: false, label: 'Graph Line', data: data, }] } }; var chart = new Chart(ctx, config); </script> </html>
注意：如果是我自己的答案，請在2天內允許我接受此答案。
Chart.js — 繪制任意垂直線
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.