如何創建同時使用X和Y軸字符串的圖表？

Question

在ChartJS的文檔頁面上，確實有一個與我的問題相對應的部分，但我不明白其說明。 它寫道：

如果使用全局配置，則從圖表數據中包含的標簽陣列之一中繪制標簽。 如果僅定義了data.labels，則將使用它。 如果定義了data.xLabels並且軸為水平軸，則將使用此軸。 同樣，如果定義了data.yLabels並且軸為垂直，則將使用此屬性。 一起使用xLabels和yLabels可以創建一個圖表，該圖表將字符串用於X和Y軸。

如果沒有另外定義，則指定上述任何設置會將x軸定義為type：category。 為了更好地控制類別標簽，還可以將標簽添加為類別軸定義的一部分。 這樣做不會應用全局默認值。

這是我嘗試過的：

 var options = { type: "line", data: { datasets: [{ label: "My First Dataset", data: [{ x: 'January', y: 'A' }, { x: 'March', y: 'B' }], fill: false, borderColor: "rgb(75, 192, 192)", lineTension: 0.1 }] }, options: { scales: { xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'], }], yAxes: [{ type: 'category', labels: ["A", "B", "C"], }] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

還有這個：

 var options = { type: "line", data: { xLabels: ["January", "February", "March", "April", "May", "June"], yLabels: ["A", "B", "C"], datasets: [{ label: "My First Dataset", data: [{ x: 'January', y: 'A' }, { x: 'March', y: 'B' }], fill: false, borderColor: "rgb(75, 192, 192)", lineTension: 0.1 }] }, options: {} } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

不幸的是，這些都不起作用。

Answer 1

經過多次反復試驗，終於得到了解決方案。 我不得不說， chart.js的文檔尚不清楚，應該加以改進。

我的發現是：

xLabels和yLabels方法不起作用。 關於這兩個參數沒有明確的文檔。
不在乎將type設置為category 。 chart.js僅接受數值； 您必須使用自己的回調方法將值映射到字符串。

 var options = { type: "line", data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [{ label: "My First Dataset", data: [1, 2, 3, 1, 1, 1], fill: false, borderColor: "rgb(75, 192, 192)", lineTension: 0.1 }] }, options: { scales: { yAxes: [{ ticks: { max: 3, min: 1, stepSize: 1, callback: function(label, index, labels) { switch (label) { case 1: return 'A'; case 2: return 'B'; case 3: return 'C'; } } } }] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

如何創建同時使用X和Y軸字符串的圖表？

問題描述

1 個解決方案

解決方案1
3 已采納 2018-08-18 15:19:48

如何創建同時使用X和Y軸字符串的圖表？

問題描述

1 個解決方案

解決方案1 3 已采納 2018-08-18 15:19:48

解決方案1
3 已采納 2018-08-18 15:19:48