Chart.js範例：設備開關-日曲線
Chart.js範例：設備開關-日曲線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- monent.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<!-- chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<title>人孔啟閉狀態報表</title>
</head>
<body>
<div style="width:100%;">
<canvas id="myChart" width="1200" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '啟閉狀態',
steppedLine: true,
xAxisID: 'first-x-axis', // 繪製此數據集的x軸的ID。
yAxisID: 'first-y-axis', // 繪製此數據集的y軸的ID。
// data: data,
data: [{
x: new Date('2020/09/01 00:00:00'),
y: "開"
}, {
x: new Date('2020/09/01 08:00:00'),
y: "關"
}, {
x: new Date('2020/09/01 16:30:00'),
y: "開"
}, {
x: new Date('2020/09/01 18:00:00'),
y: "關"
}]
}],
},
options: {
scales: {
xAxes: [
{
type: 'time', // 使用的類型
id: 'first-x-axis', // 該ID用於將數據集和比例軸鏈接在一起。
distribution: 'linear', // 數據繪製類型。：'linear', 'series'
bounds: 'data', // 確定比例尺範圍。：'data', 'ticks'
labels: [ // 要顯示的標籤數組
new Date('2020/09/01 00:00:00').getTime(),
new Date('2020/09/01 23:59:59').getTime()
],
scaleLabel: { // 比例標題配置。
display: true, // 如果為true，則顯示軸標題。
labelString: '小時', // 標題文字。 （即“人數”或“響應選項”）。
},
ticks: { // 刻度線配置。
display: true, // 如果為true，則顯示刻度標籤。
// autoSkip: false,
// sampleSize: 100, // 在決定適合多少標籤時要檢查的刻度數。設置較小的值會更快，但當標籤長度變化較大時，精度可能會降低。
source: 'auto', // 刻度線產生的來源。：'auto', 'data', 'labels'
},
time: {
min: new Date('2020/09/01 00:00:00').getTime(), // 用戶定義的刻度最小值，將覆蓋數據中的最小值。
max: new Date('2020/09/01 23:59:59').getTime(), // 用戶定義的刻度最大值，將覆蓋數據中的最大值。
displayFormats: { // 設置如何顯示不同的時間單位。
hour: 'HH', // 小時格式
},
tooltipFormat: 'HH:mm:ss', // 用於工具提示的Moment.js格式字符串。
unit: 'hour', // 單位
stepSize: 1, // 網格線之間的單位數。
minUnit: 'hour', // 時間單位要使用的最小顯示格式
// parser: 'HH:mm:ss', // 日期的自定義解析器
}
}
],
yAxes: [
{
type: 'category',
id: 'first-y-axis', // 該ID用於將數據集和比例軸鏈接在一起。
labels: ["開", "關"], // 要顯示的標籤數組。
}
]
}
}
});
</script>
</body>
</html>
留言
張貼留言