本教程構建在先前的圖表上。JS簡介,演示線和條形圖創建。我們將探索自定義選項,以增強圖表外觀和數據表示。
線圖:隨著時間的推移可視化變化
線圖有效地說明了一個變量與另一個(通常是時間)的關係如何變化。例如,它們是隨著時間的推移顯示車輛速度的理想選擇。
Chart.js簡化了線路圖的創建。默認情況下,圖表中充滿了rgba(0, 0, 0, 0.1)
。要使背景顏色可見,請確保設置backgroundColor
屬性,並且fill
屬性為true
。 tension
鍵允許自定義立方插值,從而影響數據點之間的線曲線。設置stepped
到"middle"
會產生類似逐步的效果。
數據點之間的各個段可以是唯一的樣式。此示例顯示了兩輛汽車的速度:
const checkspeed =(ctx,color_a,color_b)=> ctx.p0.parsed.y> ctx.p1.parsed.y? color_a:color_b; 令datafirst = { 標籤:“汽車A-速度(mph)”, 數據:[0,59,75,20,20,55,40], BorderColor:“黑色”, 背景色:“透明”, BorderDash:[3,3], 步進:“中間” }; 令dataSecond = { 標籤:“汽車B-速度(mph)”, 數據:[20、15、60、60、65、30、70], BorderColor:“藍色”, 背景色:“透明”, 部分: { borderColor:ctx => checkspeed(ctx,'orangered','yellowgreen'), },, }; 令SpeedData = { 標籤:[“ 0s”,“ 10s”,“ 20S”,“ 30S”,“ 40S”,“ 50S”,“ 60S”], 數據集:[DataFirst,DataSecond] }; 令LineChart =新圖表(SpeedCanvas,{ 類型:“線”, 數據:SpeedData });
該代碼比較連續的數據點。如果速度降低,則使用orangered
;否則, yellowgreen
。
條形圖:多個Y軸為清晰
對於具有不同量表的多個數據集,使用多個Y軸可增強可讀性。每個數據集可以使用yAxisID
鍵分配給特定的Y軸。
令GravityBars ='#f06292'; 令密度鍵='#4db6ac'; 讓densedata = { 標籤:“行星密度(kg/m3)”,, 數據:[5427,5243,5514,3933,1326,687,1271,1638], 背景彩色:密度鍵, Yaxisid:“ Y軸密度” }; 令GravityData = { 標籤:“行星的重力(M/S2)”,, 數據:[3.7,8.9,9.8,3.7,23.1,9.0,8.7,11.0], 背景彩色:GravityBars, Yaxisid:“ Y軸 - 重力” }; 令PlanetData = { 標籤:[“水星”,“金星”,“地球”,“火星”,“木星”,“土星”,“天王星”,“ Neptune”], 數據集:[denseptata,raveritydata] }; 令ChartOptions = { Barpercentage:1, 類別:0.8, 秤:{ “ y軸密度”:{ 網格: { 顏色:密度鍵, TickColor:密度桿, 邊界顏色:密度桿 },, tick:{ 顏色:密度桿 },, 位置:“左” },, “ Y軸 - 重力”:{ 網格: { 顏色:重力桿, TickColor:GravityBars, 邊界顏色:GravityBars },, tick:{ 顏色:GravityBars },, 位置:“右” } } }; 令barchart =新圖表(densecanvas,{ 類型:“ bar”, 數據:PlanetData, 選項:ChartOptions });
此示例使用唯一的yAxisID
值,並在chartOptions
中為每個軸定製網格,tick和邊框顏色。 barPercentage
和categoryPercentage
Control桿間距。
結論
本教程涵蓋了Chart.js中的基本線路和條形圖創建和自定義,使您能夠創建視覺上吸引人且內容豐富的圖表。下一個教程將探索雷達和極地圖表。
以上是開始使用Chart.js:線和條形圖的詳細內容。更多資訊請關注PHP中文網其他相關文章!