??之前介紹chart.js中折線圖的基本用法時，對borderColor、fill、tension、showLine屬性做了基本說明，本文介紹除此之外的折線圖常用屬性用法及效果。

backgroundColor

??該屬性設置折線下方區域的填充顏色，僅在fill屬性為true時有效，如果有多條折線，僅在該折線與下方折線的非重疊區域顯示背景色，其效果如下圖所示。

borderCapStyle

??用于設置線端點的形狀，主要取值為butt、round、square，默認值為butt。由于效果不是太好查看，本文引用參考文獻4中的效果圖以示三者的區別（從左到右依次為butt、round、square）。

borderDash

??用于設置折線中的段劃線模式，數值型數組，默認值為空，也即繪制實線。如果繪制段劃線，可以設置成長度為偶數的整數數組（長度為奇數，會自動倍增數組長度，并將原有內容復制填充一份，如[5, 15, 25] 會變為 [5, 15, 25, 5, 15, 25])。其代碼及效果如下圖所示：

datasets: [{label: '折線1',data: [65, 59, 80, 81, 56, 55, 40],fill: false,borderColor: 'rgb(75, 192, 192)',tension: 0,showLine:true,hoverBackgroundColor:'rgb(255, 255, 0)',borderDash:[12, 3, 3]},{label: '折線2',data: [85, 79, 100, 101, 76, 75, 60],fill: true,borderColor: 'rgb(175, 92, 92)',tension: 0,showLine:true,borderDash:[20, 3, 3, 3, 3, 3, 3, 3]}]};

borderDashOffset

??用于設置繪制段劃線時的偏移量，參考文獻5中介紹了利用動態改變偏移量來實現動畫效果的，有興趣的可以看看。

borderJoinStyle

??用于設置線與線連接處的形狀，主要取值為bevel、round、miter，默認為miter。由于效果不是太好查看，本文引用參考文獻6中的效果圖以示三者的區別（從上到下依次為round、bevel、miter）。

borderWidth

??用于設置線寬，默認值為3（像素)，其效果如下圖所示。

cubicInterpolationMode

??用于設置繪制點與點之間的曲線時的差值算法，主要取值為default和monotone，默認值為default。這兩者的區別請見參考文獻2和7，兩種不同設置的效果圖如下所示：
##### indexAxis

??用于設置基準坐標軸，默認是水平方向，個人理解應該是以水平方向為x軸，如果設置為y，則是指以豎直方向為x軸，其效果如下圖所示：

order

??用于設置繪圖順序，詳見參考文獻8。

pointStyle

??用于設置折線中點的形狀，默認為圓形，其它取值如下所示。效果圖如下圖所示。

• cross；
• crossRot；
• dash；
• line；
• rect；
• rectRounded；
• rectRot；
• star；
• triangle。
  

stack

??用于設置數據集的分組名稱，繪制堆疊面積圖時，stack相同的數據集會堆疊在一起。
??三組數據的stack值相同時，其堆疊圖如下所示：

stepped

??用于設置是否繪制成階梯線，主要取值為false、true、before、after、middle，默認值為false。設置為true的話，其效果等同于before。before、after、middle用于指定點在線段中的位置。效果圖如下：

參考文獻：
[1]https://chartjs.bootcss.com/docs/
[2]https://www.chartjs.org/docs/latest/charts/line.html#line-styling
[3]https://www.cnblogs.com/landeanfen/p/5026485.html
[4]https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
[5]https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
[6]https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
[7]https://blog.csdn.net/qq_43592352/article/details/106752638
[8]https://www.chartjs.org/docs/latest/charts/mixed.html#drawing-order

總結

以上是生活随笔為你收集整理的chart.js使用学习——折线图（2：常用属性设置)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。