前四篇教程中,你已經學習了大量關於Chart.js的知識。閱讀完前四篇教程後,你應該能夠自定義工具提示和標籤、更改字體以及創建不同類型的圖表。本系列教程尚未介紹Chart.js的一個方面:坐標軸和刻度。
自庫的v1.0版本以來,刻度發生了很大變化,現在功能更加強大。在本教程中,你將學習如何操作刻度並使用庫提供的不同選項來控制其外觀。
網格線的所有配置選項都嵌套在標題和字體鍵的scale
選項下。
以下是用一組不同的圖表選項指定的相同舊的汽車速度圖表。
var chartOptions = { plugins: { legend: { display: true, position: 'top', labels: { boxWidth: 50, usePointStyle: true, pointStyle: "line" } } }, scales: { x: { grid: { display: false }, title: { display: true, text: "Time in Seconds", color: "red", font: { size: 24, weight: "bold" } } }, y: { grid: { color: "#ccc", borderDash: [20, 4], borderColor: "black", tickColor: "black" }, title: { display: true, text: "Speed in Miles per Hour", color: "green", font: { size: 18, weight: "bold" } } } } };
還有一個名為grid
的鍵。當設置為font
鍵時。
你还可以使用单位设置为minute
的最小值和最大值来设置刻度的最小值和最大值。可以使用displayFormats
鍵指定時間在刻度中顯示的格式。
你還可以使用round
鍵在將時間繪製到圖表上之前對其進行舍入。设置round
的值时要小心。假設你將其值設置為hour
,並且需要在圖表上繪製兩個時間。如果一個時間是上午5:30,另一個時間是上午5:50,它們都將繪製在上午5:00的刻度標記上。将其值设置为minute
将分别在5:30和5:50标记上绘制它们。
可以使用以下代碼使用時間刻度繪製教程開頭繪製的折線圖。
var chartOptions = { plugins: { legend: { position: "top", labels: { boxWidth: 50, usePointStyle: true, pointStyle: "line", } } }, scales: { x: { type: "time", grid: { tickColor: "green", borderDash: [5, 2], tickWidth: 2, color: "black", borderColor: "black", }, time: { unit: "minute", stepSize: 30, tooltipFormat: "hh:mm a", displayFormats: { "minute": "hh:mm a" } }, ticks: { color: "green", font: { weight: "bold" } }, title: { display: true, text: "Time", font: { weight: "bold", size: 22 } } }, y: { grid: { color: "black", borderDash: [5, 2,], borderColor: "black", tickColor: "red", tickWidth: 2, }, ticks: { color: "red", font: { weight: "bold" } }, title: { display: true, text: "Speed (in mph)", font: { weight: "bold", size: 22 } } } } };
本教程幫助你了解Chart.js中不同類型的刻度。你現在可以通過控制刻度的顏色、最小值和最大值、刻度數以及其他此類因素來輕鬆自定義圖表中的刻度。
閱讀本系列中的所有五個教程後,你應該能夠創建Chart.js中提供的所有類型的圖表。我希望你喜歡本教程和本系列。
如果你正在尋找其他學習資源或在工作中使用的資源,請查看我們在Envato市場上提供的資源。
以上是開始使用Chart.js:軸和尺度的詳細內容。更多資訊請關注PHP中文網其他相關文章!