var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, { type: 'line', data: { labels: {{ labels}},//labels are the time values datasets: [{ label: '# temperature', data: {{ datas}}, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }});
1 回答
小唯快跑啊
TA貢獻1863條經驗 獲得超2個贊
您需要將時間笛卡爾軸定義為與數據匹配的單位。默認顯示格式為“小時”（例如“2PM”）。您可能還應該使用相同的格式來顯示工具提示。xAxis
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
請注意，圖表.js使用矩.js作為時間軸的功能。因此，您應該使用圖表的捆綁版本.js該版本在單個文件中包含 Moment.js。
請看一下 belo 可運行代碼片段。
const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '# temperature',
data: datas,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="90"></canvas>
添加回答
舉報
0/150
提交
取消