本文將指導你如何使用 Chart.JS 庫調整柱狀圖 Y 軸的顯示范圍，特別是如何設置最小值、最大值和步長，從而更清晰地展示數據，避免因 Y 軸起點過高導致的數據失真問題。通過本文，你將學會如何自定義 Chart.js 圖表的 Y 軸，使其更符合你的數據展示需求。
Chart.js 是一個流行的 JavaScript 圖表庫，可以輕松地在網頁上創建各種圖表。在創建柱狀圖時，有時我們需要自定義 Y 軸的范圍，例如設置最小值、最大值和步長，以便更好地展示數據。以下是如何使用 Chart.js 調整柱狀圖 Y 軸范圍的詳細步驟。
1. 引入 Chart.js 庫
首先，確保你的 html 文件中引入了 Chart.js 庫。你可以通過 CDN 引入，也可以下載到本地引入。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
2. 創建 canvas 元素
在 HTML 文件中創建一個
<canvas id="myChart" width="400" height="200"></canvas>
3. 編寫 JavaScript 代碼
接下來，編寫 JavaScript 代碼來創建和配置圖表。關鍵在于 options.scales.yAxes 中的配置。
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', // 圖表類型為柱狀圖 data: { labels: ['Category A', 'Category B', 'Category C', 'Category D'], datasets: [{ label: 'Data Set', data: [4, 7, 2, 9], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { min: 0, // Y 軸最小值 max: 10, // Y 軸最大值 stepSize: 1 // Y 軸步長 } }] } } });
代碼解釋：
- type: ‘bar’：指定圖表類型為柱狀圖。
- data.labels：定義 X 軸的標簽。
- data.datasets：定義數據集，包括數據、背景顏色和邊框顏色。
- options.scales.yAxes：配置 Y 軸的屬性。
- ticks.min：設置 Y 軸的最小值。
- ticks.max：設置 Y 軸的最大值。
- ticks.stepSize：設置 Y 軸的步長，即每個刻度之間的間隔。
4. 完整 HTML 示例
下面是一個完整的 HTML 示例，展示了如何使用 Chart.js 創建一個帶有自定義 Y 軸范圍的柱狀圖。
Chart.js Y 軸范圍調整示例 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> <canvas id="myChart" width="400" height="200"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Category A', 'Category B', 'Category C', 'Category D'], datasets: [{ label: 'Data Set', data: [4, 7, 2, 9], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { min: 0, max: 10, stepSize: 1 } }] } } }); </script>
注意事項
- 確保 min 和 max 的值能夠包含你的所有數據，否則部分數據可能無法顯示。
- stepSize 的選擇應該根據數據的范圍和精度進行調整，以保證圖表的可讀性。
- 如果數據動態變化，需要根據新的數據范圍動態調整 min 和 max 的值。
總結
通過設置 options.scales.yAxes 中的 ticks.min、ticks.max 和 ticks.stepSize 屬性，你可以輕松地調整 Chart.js 柱狀圖的 Y 軸范圍，從而更好地展示數據。這個方法同樣適用于其他類型的圖表，例如折線圖和散點圖。希望本教程能夠幫助你更好地使用 Chart.js 庫。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
