Chart.js 參數
Chart.js 參數
var chart_demp = new Chart(ctx, {
type: 'line', // 全域曲線類型：'line', 'bar', 'radar', 'pie', 'doughnut', 'polarArea', 'bubble', 'scatter'
data: {
datasets: [
// line 專用
{
// 通用
type: 'line', // 曲線類型：'line', 'bar', 'radar', 'pie', 'doughnut', 'polarArea', 'bubble', 'scatter'
label: '', // 圖例和工具提示中顯示的數據集標籤。
order: 0, // 數據集的繪製順序。也影響堆疊順序，工具提示和圖例。
xAxisID: 'first x axis', // 繪製此數據集的x軸的ID。
yAxisID: 'first y axis', // 繪製此數據集的y軸的ID。
// 點樣式
pointBackgroundColor: 'rgba(0, 0, 0, 0.1)', // 點的填充顏色。
pointBorderColor: 'rgba(0, 0, 0, 0.1)', // 點的邊框顏色。
pointBorderWidth: 1, // 點邊框的寬度（以像素為單位）。
pointHitRadius: 1, // 對鼠標事件做出反應的未顯示點的像素大小。
pointRadius: 3, // 點形狀的半徑。如果設置為0，則不渲染該點。
pointRotation: 0, // 點的旋轉度數。
pointStyle: 'circle', // 風格點：'circle','cross','crossRot','dash','line','rect','rectRounded','rectRot','star','triangle'
// 線樣式
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 線條填充顏色。
borderCapStyle: 'butt', // 線帽樣式。："butt","round","square"
borderColor: 'rgba(0, 0, 0, 0.1)', // 線條顏色。
borderDash: [5, 15], // 破折號的長度和間距。
borderDashOffset: 0.0, // 虛線的偏移量。
borderJoinStyle: 'miter', // 線縫樣式。："bevel","round","miter"
borderWidth: 3, // 線寬（以像素為單位）。
clip: {}, // 如何相對於chartArea進行裁剪。正值允許溢出，負值會截斷chartArea內的許多像素。 0 =裁剪chartArea。還可以按以下方式配置裁剪：{left: 5, top: false, right: -2, bottom: 0}
fill: true, // 是否填充線下區域。
lineTension: 0.4, // 貝塞爾曲線的線張力。設置為0以繪製直線。如果使用單調三次插值，則忽略此選項。
showLine: true, // 如果為false，則不會為此數據集繪製線。
spanGaps: true, // 如果為true，則將在無數據或空數據的點之間繪製線條。如果為false，則具有NaN數據的點將在該行中產生一個中斷。
// 點互動性樣式
pointHoverBackgroundColor: 'rgba(0, 0, 0, 0.1)', // 懸停時點背景色。
pointHoverBorderColor: 'rgba(0, 0, 0, 0.1)', // 懸停時點邊框的顏色。
pointHoverBorderWidth: 1, // 懸停時點的邊框寬度。
pointHoverRadius: 4, // 懸停時點的半徑。
// 線互動性樣式
hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)', // 懸停時線條填充顏色。
hoverBorderCapStyle: 'butt', // 懸停時線帽樣式。："butt","round","square"
hoverBorderColor: 'rgba(0, 0, 0, 0.1)', // 懸停時線條顏色。
hoverBorderDash: [5, 15], // 懸停時破折號的長度和間距。
hoverBorderDashOffset: 0.0, // 懸停時虛線的偏移量。
hoverBorderJoinStyle: 'miter', // 懸停時線縫樣式。："bevel","round","miter"
hoverBorderWidth: 3, // 懸停時線寬（以像素為單位）
// 三次樣條插值模式
cubicInterpolationMode: 'default', // 'default', 'monotone'
// 階梯線
steppedLine: false, // false, true, 'before', 'after', 'middle'
// 數據集(接受以下類型)
data: [20, 10],
data: [{ x: '2016-12-25', y: 20 }],
data: [[5, 6], [-3, -6]]
},
// bar 專用
{
// 通用
label: '', // 圖例和工具提示中顯示的數據集標籤。
order: 0, // 數據集的繪製順序。也影響堆疊順序，工具提示和圖例。
xAxisID: 'first x axis', // 用於繪製此數據集的x軸的ID。
yAxisID: 'first Y axis', // 繪製此數據集的y軸的ID。
// 樣式
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 條形背景顏色。
borderColor: 'rgba(0, 0, 0, 0.1)', // 條形邊框的顏色。
borderSkipped: 'bottom', // 繪製條時要跳過的邊緣。：'bottom','left','top','right',false
borderWidth: 0, // 條形邊框的寬度（以像素為單位）。
barPercentage: 0.9, // 每個條形圖的可用寬度的百分比（0-1）應該在類別寬度內。 1.0將佔據整個類別的寬度，並將條形圖彼此緊挨著放置。
categoryPercentage: 0.8, // 每個類別的可用寬度的百分比（0-1）應該在樣本寬度之內。
barThickness: 6, // 手動設置每個條的寬度（以像素為單位）。如果設置為“ flex”，它將計算全局並排排列條形的“最佳”樣本寬度。如果未設置（默認），則條形圖的大小將基於最小間隔而相等。
maxBarThickness: 8, // 設置此項以確保條的大小不大於此值。
minBarLength: 2, // 設置此項以確保條形的最小長度（以像素為單位）。
// 互動性樣式
hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)', // 懸停時條形的背景顏色。
hoverBorderColor: 'rgba(0, 0, 0, 0.1)', // 懸停時條形邊框的顏色。
hoverBorderWidth: 1, // 懸停時條形邊框的寬度（以像素為單位）。
// 數據集(接受以下類型)
data: [20, 10],
data: [{ x: '2016-12-25', y: 20 }],
data: [[5, 6], [-3, -6]]
},
// radar 專用 (施工中...)
{
},
// Doughnet & Pie 專用 (施工中...)
{
},
// Polar Area 專用 (施工中...)
{
},
// Bubble 專用 (施工中...)
{
},
]
},
options: {
animation: {
duration: 1000, // 通用動畫時間
easing: "linear", // 動畫效果：'linear','easeInQuad','easeOutQuad','easeInOutQuad','easeInCubic','easeOutCubic','easeInOutCubic','easeInQuart','easeOutQuart','easeInOutQuart','easeInQuint','easeOutQuint','easeInOutQuint','easeInSine','easeOutSine','easeInOutSine','easeInExpo','easeOutExpo','easeInOutExpo','easeInCirc','easeOutCirc','easeInOutCirc','easeInElastic','easeOutElastic','easeInOutElastic','easeInBack','easeOutBack','easeInOutBack','easeInBounce','easeOutBounce','easeInOutBounce'
currentStep: 10, // 當前動畫幀號
numSteps: 10, // 動畫幀數
onProgress: function () { }, // 動畫執行的回調函數
onComplete: function () { }, // 動畫結束的回調函數
},
layout: {
padding: { // Padding距離
left: 50,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: true, // 是否顯示Legend
position: "top", // Legend顯示位置：'top','left','bottom','right'
align: 'center', // legend靠齊方式：'start','center','end'
fullWidth: true, //標記此框應佔據畫布的整個寬度（向下推其他框）。日常使用中不太可能需要更改此設置
onClick: function () { }, //在標籤項目上註冊click事件時調用的回調。
onHover: function () { }, //在標籤項頂部註冊“ mousemove”事件時調用的回調。
onLeave: function () { }, //在先前懸停的標籤項之外註冊“ mousemove”事件時調用的回調。
reverse: false, //圖例將以相反的順序顯示數據集。
labels: {
boxWidth: 40, // 色彩方框寬度
fontSize: 12, // 文字尺寸
fontStyle: 'normal', // 文字樣式'normal','bold'
fontColor: '#666', // 文字顏色
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 文字字體
padding: 10, // 色彩方框行之間的填充
generateLabels: function () { }, //為圖例中的每件事生成圖例項。默認實現返回顏色框的文本+樣式。
filter: function () { }, // 從圖例中過濾圖例項。接收2個參數，圖例項目和圖表數據。
usePointStyle: false, // 標籤樣式將匹配相應的點樣式（大小基於boxWidth和fontSize之間的最小值）。
},
rtl: false, //用於從右到左渲染圖例。
textDirection: 'ltr', //文字方向(左到右)or(右到左)：'rtl','ltr'
},
legendCallback: function (chart) { },// 有時您需要一個非常複雜的圖例。在這些情況下，生成HTML圖例是有意義的。
title: { // 標題
display: false, // 是否顯示
position: "top", // 顯示位置：'top','left','bottom','right'
fontSize: 12, // 文字尺寸
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 文字字體
fontColor: '#666', // 文字顏色
fontStyle: 'bold', // 文字樣式'normal','bold'
padding: 10, // 填充間距
lineHeight: 1.2, // 單個文本行的高度。
text: "這是Title", // 文字
},
tooltips: { // 工具提示框
enabled: true, // 是否啟用了畫布上的工具提示框？
custom: function (tooltipModel) { }, // 客製化
mode: 'point', // 設置哪些元素出現在工具提示框中：'nearest', 'point', 'index', 'dataset', 'x', 'y'
intersect: true, // 如果為true，則僅當鼠標位置與元素相交時才應用工具提示框模式。
position: 'average', // 工具提示框的位置'average','nearest'
callbacks: {
beforeTitle: function (tooltipItem, data) { }, // 返回要在標題之前呈現的文本。
title: function (tooltipItem, data) { }, // 返回文本以呈現為工具提示框的標題。
afterTitle: function (tooltipItem, data) { }, // 返回標題後要渲染的文本。
beforeBody: function (tooltipItem, data) { }, // 返回要在正文部分之前呈現的文本。
beforeLabel: function (tooltipItem, data) { }, // 返回要在單個標籤之前呈現的文本。工具提示框中的每個項目都會被調用。
label: function (tooltipItem, data) { }, // 返回文本以針對工具提示框中的單個項目進行渲染。
labelColor: function (tooltipItem, data) { }, // 返回要為工具提示框項呈現的顏色。
labelTextColor: function (tooltipItem, data) { }, // 返回工具提示框項標籤文本的顏色。
afterLabel: function (tooltipItem, data) { }, // 返回要在單個標籤後呈現的文本。
afterBody: function (tooltipItem, data) { }, // 返回要在正文部分之後呈現的文本。
beforeFooter: function (tooltipItem, data) { }, // 返回要在頁腳部分之前呈現的文本。
footer: function (tooltipItem, data) { }, // 返回文本以呈現為工具提示的頁腳。
afterFooter: function (tooltipItem, data) { }, // 在頁腳部分之後呈現的文本。
},
itemSort: function () { }, // 排序工具提示框項目。
filter: function () { }, // 過濾工具提示框項目。
backgroundColor: 'rgba(0, 0, 0, 0.8)', // 工具提示框的背景顏色。
titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", //標題字體。
titleFontSize: 12, // 標題字體大小。
titleFontStyle: 'bold', // 標題字體樣式。
titleFontColor: '#fff', // 標題字體顏色。
titleAlign: "left", // 標題文本行的水平對齊：'left','right','center'
titleSpacing: 2, // 間距添加到每個標題行的頂部和底部。
titleMarginBottom: 6, // 在標題部分底部添加的邊距。
bodyFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 主體線條字體。
bodyFontSize: 12, // 正文字體大小。
bodyFontStyle: "normal", // 正文字體樣式：'normal','bold'。
bodyFontColor: '#fff', // 正文字體顏色。
bodyAlign: 'left', // 正文文本行的水平對齊：'left','right','center'
bodySpacing: 2, // 要添加到每個工具提示項頂部和底部的間距。
footerFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 頁腳字體。
footerFontSize: 12, // 頁腳字體大小。
footerFontStyle: "bold", // 頁腳字體樣式。：'normal','bold'
footerFontColor: '#fff', // 頁腳字體顏色。
footerAlign: 'left', // 頁腳文本行的水平對齊：'left','right','center'
footerSpacing: 2, // 間距添加到每個頁腳行的頂部和底部。
footerMarginTop: 6, // 在繪製頁腳之前添加的邊距。
xPadding: 6, // 在工具提示的左側和右側添加填充。
yPadding: 6, // 在工具提示的頂部和底部添加填充。
caretPadding: 2, // 使工具提示箭頭的末端遠離工具提示點的額外距離。
caretSize: 5, // 工具提示箭頭的大小（以px為單位）。
cornerRadius: 6, // 提示的曲線拐角半徑。
multiKeyBackground: '#fff', // 當工具提示中包含多個項目時，在彩色框後面繪製顏色。
displayColors: true, // 如果為true，則在工具提示中顯示顏色框。
borderColor: 'rgba(0, 0, 0, 0)', // 邊框的顏色。
borderWidth: 0, // 邊框的大小。
rtl: true, // 從右到左渲染圖例時為true。
textDirection: 'ltr', //文字方向(左到右)or(右到左)：'rtl','ltr'
},
elements: { // 以相同方式設置所有數據集的樣式
radius: 3, // 點半徑。
pointStyle: 'circle', // 點樣式：'circle','cross','crossRot','dash','line','rect','rectRounded','rectRot','star','triangle'
rotation: 0, // 點旋轉（以度為單位）。
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 點填充顏色。
borderWidth: 1, // 點描邊寬度。
borderColor: 'rgba(0, 0, 0, 0.1)', // 點描邊顏色。
hitRadius: 1, // 額外的半徑添加到點半徑以進行命中檢測。
hoverRadius: 4, // 懸停時的點半徑。
hoverBorderWidth: 1, // 懸停時的描邊寬度。
line: { // line chart專用
tension: 0.4, // 貝塞爾曲線張力（無貝塞爾曲線時為0）。
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 線填充顏色。
borderWidth: 3, // 線描寬度。
borderColor: 'rgba(0, 0, 0, 0.1)', // 線條描邊顏色。
borderCapStyle: 'butt', // 線帽樣式。："butt","round","square";
borderDash: [5, 15, 25], // 線破折號。
borderDashOffset: 0.0, // 線破折號偏移量。
borderJoinStyle: "miter", // 線聯接樣式。"bevel","round","miter";
capBezierPoints: true, // 如果將Bézier控件保留在圖表中，則為true；如果沒有限制，則為false。
cubicInterpolationMode: "default", // 插值模式適用。：'default'.'monotone'
fill: '自訂義', // 如何填充線下區域。：string|bool|number
stepped: false, // 如果為true，則將線顯示為階梯線（張力將被忽略）。
},
rectangle: { // bar chart專用
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 條形填充顏色。
borderWidth: 0, // 桿行程寬度。
borderColor: 'rgba(0, 0, 0, 0.1)', // 條形筆觸顏色。
borderSkipped: 'bottom', // 跳過（排除）的邊框：'bottom', 'left', 'top' or 'right'
},
arc: { // pie chart專用
angle: 180, // 覆蓋的弧角。僅用於polar。
backgroundColor: 'rgba(0, 0, 0, 0.1)', // 圓弧填充顏色。
borderAlign: 'center', // 圓弧筆觸對齊。：'start','center','end'
borderColor: '#fff', // 弧線筆觸顏色。
borderWidth: 2, // 弧線筆劃寬度。
}
},
hover: {
// 覆蓋全局設置
animationDuration: 0, // 懸停項目時的動畫持續時間
mode: 'nearest', //'nearest', 'point', 'index', 'dataset', 'x', 'y'
},
responsiveAnimationDuration: 0, // 調整大小後的動畫持續時間
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'], //事件觸發方式：'mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'
scales: {
xAxes: [ // x軸設定
{
// 與y軸設定相同
},
],
yAxes: [ // y軸設定
// Cartesian 座標軸專用：遵循笛卡爾網格的軸稱為“笛卡爾軸”。直角坐標軸用於折線圖，條形圖和氣泡圖。默認情況下，Chart.js中包含四個直角坐標軸。
{
// 通用設定
type: 'time', // 使用的秤的類型。可以創建自定義比例並使用字符串鍵進行註冊。這允許更改圖表的軸類型。：'category', 'linear', 'logarithmic', 'time'
position: 'left', // 軸在圖表中的位置。可能的值為：'top', 'left', 'bottom', 'right'
offset: false, // 如果為true，則將額外的空間添加到兩個邊緣，並縮放軸以適合圖表區域。對於條形圖，默認情況下將其設置為true。
id: 'first-y-axis', // 該ID用於將數據集和比例軸鏈接在一起。
gridLines: { // 網格線配置。
display: true, // 如果為false，則不顯示該軸的網格線。
circular: false, // 如果為true，則網格線為圓形（僅在雷達圖上）。
color: 'rgba(0, 0, 0, 0.1)', // 網格線的顏色。如果指定為數組，則第一種顏色適用於第一條網格線，第二種顏色適用於第二條網格線，依此類推。
borderDash: [5, 15, 25], // 網格線上虛線的長度和間距。
borderDashOffset: 0.0, // 虛線的偏移量。
lineWidth: 1, // 網格線的筆劃寬度。
drawBorder: true, // 如果為true，則在軸和圖表區域之間的邊緣繪製邊框。
drawOnChartArea: true, // 如果為true，則在軸線內的圖表區域上繪製線。當有多個軸並且需要控制繪製哪些網格線時，此功能很有用。
drawTicks: true, // 如果為true，則在圖表旁邊的軸區域中的刻度線旁邊繪製線條。
tickMarkLength: 10, // 網格線將繪製到軸區域中的長度（以像素為單位）。
zeroLineWidth: 1, // 第一個索引（索引0）的網格線的筆觸寬度。
zeroLineColor: 'rgba(0, 0, 0, 0.25)', // 第一個索引（索引0）的網格線的筆觸顏色。
zeroLineBorderDash: [5, 15, 25], // 第一個索引（索引0）的網格線虛線的長度和間距。
zeroLineBorderDashOffset: 0.0, // 第一個索引（索引0）的網格線虛線的偏移量。
offsetGridLines: false, // 如果為true，則網格線將在標籤之間移動。對於條形圖，默認情況下將其設置為true。
z: 0, // 網格線層的z索引。值<= 0繪製在數據集下，頂部> 0。
},
scaleLabel: { // 比例標題配置。
display: false, // 如果為true，則顯示軸標題。
labelString: '', // 標題文字。 （即“人數”或“響應選項”）。
lineHeight: 1.2, // 單個文本行的高度
fontColor: '#666', // 標尺標題的字體顏色。
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 標尺標題的字體系列遵循CSS字體系列選項。
fontSize: 12, // 比例標題的字體大小。
fontStyle: 'normal', // 標尺標題的字體樣式遵循CSS字體樣式選項（即正常，斜體，傾斜，初始，繼承）。
padding: 4, // 填充以應用於刻度標籤周圍。僅實現頂部和底部。
},
ticks: { // 刻度線配置。
min: 0, // 用戶定義的刻度最小值，將覆蓋數據中的最小值。
max: 100, // 用戶定義的刻度最大值，將覆蓋數據中的最大值。
sampleSize: 10, // 在決定適合多少標籤時要檢查的刻度數。設置較小的值會更快，但當標籤長度變化較大時，精度可能會降低。
autoSkip: true, // 如果為true，則自動計算可以顯示多少標籤並相應地隱藏標籤。標籤將在跳過任何標籤之前向上旋轉到maxRotation。關閉autoSkip以顯示所有標籤，無論如何。
autoSkipPadding: 0, // 啟用自動跳過功能時，在水平軸上的刻度線之間填充。
labelOffset: 0, // 以像素為單位的距離，以使標籤偏離刻度線的中心點（x軸的x方向，y軸的y方向）。注意：這可能導致邊緣的標籤被畫布的邊緣裁切
maxRotation: 50, // 刻度線標籤縮合時的最大旋轉度。注意：除非必要，否則不會旋轉。注意：僅適用於水平刻度尺。
minRotation: 0, // 刻度標籤的最小旋轉。注意：僅適用於水平刻度尺。
mirror: false, // 圍繞軸翻轉刻度標籤，在圖表內部而不是外部顯示標籤。注意：僅適用於垂直刻度。
padding: 0, // 刻度標籤和軸之間的填充。當設置在垂直軸上時，這適用於水平（X）方向。當在水平軸上設置時，這適用於垂直（Y）方向。
// 樣式
callback: function (value, index, values) { //返回刻度值的字符串表示形式，應顯示在圖表上
return '$' + value;
},
display: true, // 如果為true，則顯示刻度標籤。
fontColor: '#666', // 刻度標籤的字體顏色。
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 刻度標籤的字體系列遵循CSS字體系列選項。
fontSize: 12, // 刻度標籤的字體大小。
fontStyle: 'normal', // 勾號標籤的字體樣式遵循CSS字體樣式選項：normal, italic, oblique, initial, inherit
lineHeight: 1.2, // 單行文字的高度
reverse: false, // 顛倒刻度線標籤的順序。
minor: { // 小刻度線配置。忽略的選項是從上面的選項繼承的。
callback: function (value, index, values) { // 返回刻度值的字符串表示形式，因為它應該顯示在圖表上。
return '$' + value;
},
fontColor: '#666', // 刻度標籤的字體顏色。
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 刻度標籤的字體系列遵循CSS字體系列選項。
fontSize: 12, // 刻度標籤的字體大小。
fontStyle: 'normal', // 勾號標籤的字體樣式遵循CSS字體樣式選項：normal, italic, oblique, initial, inherit。
lineHeight: 1.2, // 單行文字的高度
},
major: { // 主要刻度線配置。忽略的選項是從上面的選項繼承的。
enabled: false, // 如果為true，則主要刻度選項用於顯示主要刻度。
callback: function (value, index, values) { // 返回刻度值的字符串表示形式，因為它應該顯示在圖表上。
return '$' + value;
},
fontColor: '#666', // 刻度標籤的字體顏色。
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 刻度標籤的字體系列遵循CSS字體系列選項。
fontSize: 12, // 刻度標籤的字體大小。
fontStyle: 'normal', // 刻度標籤的字體樣式，遵循CSS字體樣式選項： normal, italic, oblique, initial, inherit
lineHeight: 1.2, // 單行文字的高度
},
padding: 0, // 設置刻度標籤相對於軸的偏移量。
z: 0, // 刻度線層的Z索引。在圖表區域上繪製刻度時很有用。值<= 0繪製在數據集下，頂部> 0。
},
// category：文字作為軸刻度標籤
type: 'category',
labels: ['January', 'February', 'March', 'April', 'May', 'June'], // 要顯示的標籤數組。
ticks: {
min: 'January', // 顯示的最小項目。
max: 'June', // 顯示的最大項目。
},
// linear：數值作為軸刻度標籤
type: 'linear',
ticks: {
beginAtZero: true, // 如果為true，則比例尺將包含0（如果尚未包含）。
maxTicksLimit: 11, // 要顯示的最大刻度線和網格線數。
precision: 2, // 如果已定義且未指定stepSize，則步長將舍入到許多小數位。
stepSize: 0.5, // 用戶為秤定義的固定步長。
suggestedMax: 100, // 計算最大數據值時使用的調整。
suggestedMin: 0, // 計算最小數據值時使用的調整。
},
// logarithmic：對數作為軸刻度標籤
type: 'logarithmic',
// time：時間作為軸刻度標籤
type: 'time',
adapters: {
date: {}, // 外部日期庫適配器的選項（如果該適配器需要或支持該選項）
},
distribution: 'linear', // 數據繪製類型。：'linear', 'series'
bounds: 'data', // 確定比例尺範圍。：'data', 'ticks'
ticks: {
source: 'auto', // 刻度線產生的來源。：'auto', 'data', 'labels'
},
time: {
min: 1598889600000, // 最小值
max: 1598889600001, // 最大值
displayFormats: { // 設置如何顯示不同的時間單位。
millisecond: 'h:mm:ss.SSS a', // 毫秒格式
second: 'h:mm:ss a', // 秒格式
minute: 'h:mm a', // 分格式
hour: 'hA', // 小時格式
day: 'MMM D', // 日格式
week: 'll', // 周格式
month: 'MMM YYYY', // 月格式
quarter: '[Q]Q - YYYY', // 季格式
year: 'YYYY', // 年格式
},
isoWeekday: false, // 如果為true，並且單位設置為“ week”，則一周的第一天為星期一。否則，將是星期日。
parser: '', // 日期的自定義解析器(Moment.js)。
round: 'second', // 如果已定義，則日期將四捨五入到該單元的開始。：'millisecond','second','minute','hour','day','week','month','quarter','year'
tooltipFormat: '', // 用於工具提示的Moment.js格式字符串。
unit: 'month', // 如果定義，將強制單位為某種類型。：'millisecond','second','minute','hour','day','week','month','quarter','year'
stepSize: 1, // 網格線之間的單位數。
minUnit: 'millisecond', // 時間單位要使用的最小顯示格式。：'millisecond','second','minute','hour','day','week','month','quarter','year'
}
},
// Radial 座標軸專用：徑向軸專門用於雷達和極地面積圖類型。這些軸覆蓋圖表區域，而不是位於邊緣之一上。 Chart.js中默認包括一個徑向軸。
{
angleLines: { // 角線配置。
display: true, // 如果為true，則顯示角度線。
color: 'rgba(0, 0, 0, 0.1)', // 斜線的顏色。
lineWidth: 1, // 斜線的寬度。
borderDash: [5, 15, 25], // 斜線上虛線的長度和間距。
borderDashOffset: 0.0, // 虛線的偏移量。
},
gridLines: { // 網格線配置。
display: true, // 如果為false，則不顯示該軸的網格線。
circular: false, // 如果為true，則網格線為圓形（僅在雷達圖上）。
color: 'rgba(0, 0, 0, 0.1)', // 網格線的顏色。如果指定為數組，則第一種顏色適用於第一條網格線，第二種顏色適用於第二條網格線，依此類推。
borderDash: [5, 15, 25], // 網格線上虛線的長度和間距。
borderDashOffset: 0.0, // 虛線的偏移量。
lineWidth: 1, // 網格線的筆劃寬度。
drawBorder: true, // 如果為true，則在軸和圖表區域之間的邊緣繪製邊框。
drawOnChartArea: true, // 如果為true，則在軸線內的圖表區域上繪製線。當有多個軸並且需要控制繪製哪些網格線時，此功能很有用。
drawTicks: true, // 如果為true，則在圖表旁邊的軸區域中的刻度線旁邊繪製線條。
tickMarkLength: 10, // 網格線將繪製到軸區域中的長度（以像素為單位）。
zeroLineWidth: 1, // 第一個索引（索引0）的網格線的筆觸寬度。
zeroLineColor: 'rgba(0, 0, 0, 0.25)', // 第一個索引（索引0）的網格線的筆觸顏色。
zeroLineBorderDash: [5, 15, 25], // 第一個索引（索引0）的網格線虛線的長度和間距。
zeroLineBorderDashOffset: 0.0, // 第一個索引（索引0）的網格線虛線的偏移量。
offsetGridLines: false, // 如果為true，則網格線將在標籤之間移動。對於條形圖，默認情況下將其設置為true。
z: 0, // 網格線層的z索引。值<= 0繪製在數據集下，頂部> 0。
},
pointLabels: { // 點標籤配置。
display: true, // 如果為true，則顯示點標籤。
callback: function () { }, // 回調函數可將數據標籤轉換為點標籤。默認實現只是返回當前字符串。
fontColor: '#666', // 點標籤的字體顏色。
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // 呈現標籤時使用的字體系列。
fontSize: 10, // 字體大小（以像素為單位）。
fontStyle: 'normal', // 渲染點標籤時使用的字體樣式。
lineHeight: 1.2, // 單行文字的高度
},
ticks: { // 刻度線配置。
backdropColor: 'rgba(255, 255, 255, 0.75)', // 標籤背景的顏色。
backdropPaddingX: 2, // 標籤背景的水平填充。
backdropPaddingY: 2, // 標籤背景的垂直填充。
beginAtZero: false, // 如果為true，則比例尺將包含0（如果尚未包含）。
min: 0, // 戶定義的刻度的最小數字，將覆蓋數據中的最小值。
max: 100, // 用戶定義的刻度的最大數字，將覆蓋數據中的最大值。
maxTicksLimit: 11, // 要顯示的最大刻度線和網格線數。
precision: 2, // 如果已定義且未指定stepSize，則步長將舍入到許多小數位。
stepSize: 10, // 用戶為秤定義的固定步長。
suggestedMax: 50, // 計算最大數據值時使用的調整。
suggestedMin: 100, // 計算最小數據值時使用的調整。
showLabelBackdrop: true, // 如果為true，請在刻度標籤後面繪製背景。
},
}
]
}
}
})
留言
張貼留言