使用網頁動態圖表顯示資料統計，我們的教學使用最容易上手的Chart.js輕鬆製作圖表，還能有RWD的效果，只需要一個HTML DOM及Chart.js的程式碼連結，就能依照需求完成各式圖表，如長條圖、圓餅圖、折線圖…各種，外觀加上動畫直接幫你包辦做好，讓我們一起來玩玩簡單的Chart.js製作圖表吧!
網頁動態圖表說明-長條圖
步驟說明
1. 建立HTML
– <canvas id=”myChart”></canvas>，長條圖在網站上的位置
2. 引入 Chart.js 程式碼
– <script src=”https://cdn.jsdelivr.net/npm/chart.js”></script>，
讓我們能夠使用繪製圖表的方法與功能，
Javascript功能跟Css樣式都在裡面，需要引入才能正常顯示圖表。
3. 撰寫JavaScript
– const chartElement = document.getElementById(‘myChart’)
取得HTML id=”myChart” 的Element讓我們可以對他做事情
– new Chart(chartElement
新增一個新的圖表，並且將圖表建立在chartElement這個HTML DOM上面
4. 資料說明
| type: ‘bar’ | bar在Chart.js中表示為長條圖型態的圖片所以選擇bar |
| data | 為圖表中的資料 |
| labels | 參考上圖表示資料的類型或所代表的事物 |
| datasets | 表示為各個資料的資訊與數量 |
| datasets – label | 此種資料分類類別 |
| datasets – data | 此種資料的數量 |
5. 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 長條圖顯示的位置 -->
<canvas id="myChart"></canvas>
<!-- 長條圖的原始程式碼, 可以移除掉長條圖就會消失 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const chartElement = document.getElementById('myChart');
new Chart(chartElement, {
type: 'bar',
data: {
labels: ['第一個', '第二個', '第三個'],
datasets: [{
label: '我是種類',
data: [1, 10, 5],
}]
}
});
</script>
</body>
</html>比對長條圖
1. 新增資料種類
datasets內部物件的數量就是長條圖上種類的數量(參考上圖)
可針對datasets增加多筆物件來達到更多種資料的比對與呈現
2. 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 長條圖顯示的位置 -->
<canvas id="myChart"></canvas>
<!-- 長條圖的原始程式碼, 可以移除掉長條圖就會消失 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const chartElement = document.getElementById('myChart');
new Chart(chartElement, {
type: 'bar',
data: {
labels: ['國一', '國二', '國三'],
datasets: [{
label: '男生',
data: [150, 130, 140],
},{
label: '女生',
data: [120, 160, 100],
}],
}
});
</script>
</body>
</html>圓餅圖
1. 圓餅圖使用
更換type為pie，pie在chart.js中為圓餅圖的種類
2. 修改資料格式
labels變成種類與剛剛的長條圖不同
data數量的順序跟labels標題順序相對應
3. 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 長條圖顯示的位置 -->
<canvas id="myChart"></canvas>
<!-- 長條圖的原始程式碼, 可以移除掉長條圖就會消失 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const chartElement = document.getElementById('myChart');
const data = {
labels: [
'男生',
'女生',
],
datasets: [{
label: '國中人數',
data: [420, 380],
}]
};
new Chart(chartElement, {
type: 'pie',
data: data,
});
</script>
</body>
</html>折線圖
1. 折線圖使用
更換type為line，line在chart.js中為折線圖的種類
折線圖與長條圖較類似labels與datasets內的data數量相對應
2. 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 長條圖顯示的位置 -->
<canvas id="myChart"></canvas>
<!-- 長條圖的原始程式碼, 可以移除掉長條圖就會消失 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const chartElement = document.getElementById('myChart');
const data = {
labels: [
'星期一', '星期二', '星期三', '星期四', '星期五' ,'星期六' ,'星期日',
],
datasets: [{
label: '參加人數',
data: [160, 130, 140, 160, 170, 200, 180],
}]
};
new Chart(chartElement, {
type: 'line',
data: data,
});
</script>
</body>
</html>混合圖
1. 混合圖使用
注意!! type位置移動到datasets物件裡面
盡量使用相同性質的圖表，讓labels種類能與data數量相對應，
更能呈現出一個有意義的圖表。
2. 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 長條圖顯示的位置 -->
<canvas id="myChart"></canvas>
<!-- 長條圖的原始程式碼, 可以移除掉長條圖就會消失 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const chartElement = document.getElementById('myChart');
new Chart(chartElement, {
data: {
labels: ['國一', '國二', '國三'],
datasets: [
{
type: 'bar',
label: '成功人數',
data: [8, 10, 5],
},{
type: 'line',
label: '報名人數',
data: [12, 11, 8],
}]
}
});
</script>
</body>
</html>調整Bar寬度
- Bar 類型寬度調整
透過options提供的方法調整 - 附上程式碼
new Chart(chartElement, {
type: 'bar',
data: {
labels: ['第一個', '第二個', '第三個'],
datasets: [{
label: '我是種類',
data: [1, 10, 5],
}],
},
options:{
categoryPercentage: 1, // 分類比例
barPercentage: 0.2 // 柱狀比例
}
});加入資料單位(百分比)
1. Chart js資料加上單位
options 提供針對 tooltip 的方法修改 label 顯示文字,
除了百分比也能加入幣別單位($ or USD…)
也能直接在callbacks中進行其他數學換算, 最後在return出結果
2. 附上程式碼
new Chart(chartElement, {
type: 'pie',
data: {
labels: [
'男生',
'女生',
],
datasets: [{
label: '國中人數百分比',
data: [60, 40], // 需要先把數字轉為百分比
}]
},
options: {
plugins: {
tooltip: { // hover
callbacks: {
label: function(context) {
return ` ${context.parsed} %`; // 想顯示的內容
}
}
}
}
}
});直接顯示資料
1. 加入datalabels套件
在Chart js script之前引用 <script src=”https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels”></script>
在datasets陣列的物件內加入datalabels的值(參考程式碼)
plugins: [ChartDataLabels], // 加入套件
datalabels: {
color: “#000”, // 數值顏色
anchor: “end”, // 數值位置 center, start, end
align: ‘start’, // 對齊位置 center, start, end
},
2. 附上程式碼(抱歉這部分顯示不出顏色)
<body>
<!-- 長條圖顯示的位置 -->
<canvas id="myChart"></canvas>
<!-- 長條圖的原始程式碼, 可以移除掉長條圖就會消失 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 加入顯示資料的套件 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script>
const chartElement = document.getElementById('myChart');
new Chart(chartElement, {
type: 'bar',
plugins: [ChartDataLabels], // 加入套件
data: {
labels: ['第一個', '第二個', '第三個'],
datasets: [{
label: '我是種類',
data: [1, 10, 5],
datalabels: {
color: "#000", // 數值顏色
anchor: "end", // 數值位置 center, start, end
align: 'start', // 對齊位置 center, start, end
},
}]
},
});
</script>
</body>大家可以留言給我，或是任何操作有疑問都可以讓我知道，我會盡量在一週內回覆你留言與透過email回覆給你，祝各位開發順利
你好，請問長條圖的資料可以不要用hover，直接顯示在長條圖上方或下方嗎?
你好已新增區塊直接顯示資料區塊
想問一下圓餅圖可以在它 hover 顯示的 data 後面加上 % 這個字嗎
已放上教學請參考”加入資料單位(百分比)“
推推詳細說明
目前想實作用 ChartJS 顯示動態圖表呈現網路狀態 ( JS新手還在努力中 QQ )
https://github.com/wastu01/Chartjs-demo
很有想法欸
如果想要持續更新資料 是不是可以將打ping的頻率降低
製作兩張圖表
(Y軸)
1.Average ping time
2.Average jitter
(X軸)
Pings sent or Pings received
X軸會不斷的延伸
想知道你會怎麼製作更新圖表
或是可以一起討論
因為工作上剛好有這個需求找到此篇
作者文章跟回覆都很用心 推推
目前打算固定 x 軸數量，呈現 Average ping time 數值
Average jitter 數值變化不多 好像用動態圖表呈現意義不高?
Packet loss 可能用圓餅圖，顯示量測期間掉包的比例
* p.s ChartJS 官方給的學習資源也很讚 / 對於資料怎麼處理很詳細說明 推薦給其他需要的人
https://www.chartjs3.com/docs/chart/chart-js-array-series/
主要還是要看你做這張圖的用意
可能會讓大家更明白你想要表達或觀察的內容是什麼
你好 想請問怎麼在本地端 RUN 從github載下來的Chart.js呢?
謝謝~
比較想知道你希望在本地端 RUN 從github載下來的Chart.js 用意會是什麼呢~
可以先開終端指令並打git clone https://github.com/chartjs/Chart.js.git
將專案clone到自己的電腦上
如果你是想成為Contributions
可以參考這個網站: https://www.chartjs.org/docs/master/developers/contributing.html#building-and-testing
如果你是要用在專案內
這是官方提供的安裝方式
https://www.chartjs.org/docs/latest/getting-started/installation.html
通常如果用在專案內我們會使用 npm install chart.js
如何整合在專案內: https://www.chartjs.org/docs/latest/getting-started/integration.html
import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
...
}
}
});
你好 想請問長條圖的尺寸如何修改，我有去看您的程式碼您是寫在 但不知道為什麼我的修改都失敗，嘗試過許多次，希望看到能回覆!謝謝!
你想修改的是整個長條圖的尺寸還是單一個長條圖的呢
如果想要更改整個大小可以在
canvas id=”myChart”外層加上一個div class=”chart-box”
再設定css
.chart-box {
width: 50%;
}
有新增 調整Bar寬度 段落你可以在試試看這是不是你要的