我想創建一個折線圖，它在 x 軸上有多個單日標簽。這實際上作業得很好。我將這個 javascript 陣列傳遞給 x_axis（示例）：
['2019-01-02', '2019-01-03', '2019-01-04', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-14', '2019-01-15', '2019-01-16']
問題是，圖表可以有 50 個不同的 x 軸點，因此同時顯示所有這些點是沒有意義的，因為它會過度填充 x 軸。
我想對其進行縮放，使其僅使用 x 軸上的月份。我一直在閱讀我必須使用比例設定 xAxis，但我嘗試了各種方法，但它似乎不起作用。
這是我嘗試失敗的示例：
options: {
scales: {
xAxis: [{
type: 'time',
position: 'bottom',
time: {
parser: 'YYYY-MM-DD',
displayFormats: {'day': 'MM/YY'},
tooltipFormat: 'DD/MM/YY',
unit: 'month',
}
}]
},
誰能指點一下如何做到這一點？謝謝！
uj5u.com熱心網友回復：
如果您將條目displayFormats與unit.
displayFormats: {
month: 'MM/YY'
}
請看下面的可運行代碼，看看它是如何作業的。
const now = new Date();
const data = new Array(100).fill().map((v, i) => {
const date = new Date();
date.setDate(now.getDate() i);
return { x: date.toISOString().substring(0, 10), y: Math.floor(Math.random() * 10) };
});
new Chart('chart', {
type: 'line',
data: {
datasets: [{
label: "Data",
borderColor: "rgb(255, 0, 0)",
data: data,
fill: false
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-MM-DD',
unit: 'month',
displayFormats: {
month: 'MM/YY'
},
tooltipFormat: 'DD/MM/YY'
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<canvas id="chart" height="90"></canvas>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/429862.html
標籤：javascript jQuery 推特引导 图表.js