chart.js 圖表工具

kaitty.tsai 其他

chart.js是一個很容易操作的圖表工具，只要設定好參數，就可以在頁面呈現漂漂亮亮的圖表

先載入Chart.js
CDN : https://cdnjs.com/libraries/Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js" integrity="undefined" crossorigin="anonymous"></script>

在要顯示圖表的位置加入 <canvas> 標籤

<canvas id="myChart1" ></canvas>

設定圖表

<script>
var ctx = document.getElementById('myChart1').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',  // 圖表類別 bar:柱狀 line:曲線 pie:圓餅
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'], //X軸
        datasets: [{
            label: '資料1', // 資料名稱
            backgroundColor: 'rgb(255, 99, 132)', // 顏色
            borderColor: 'rgb(255, 99, 132)',     // 邊框顏色
            data: [1, 10, 5, 2, 20, 30, 45]       // 資料
        }]
    },

    options: {}
});
</script>

設定好就會出現圖表

如果要多筆資料：

var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx2, {
    type: 'bar',

    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        datasets: [{
            label: '資料1',
            borderWidth : 1,
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(245, 89, 122)',
            data: [10, 10, 5, 2, 20, 30, 45]
        },{
            label: '資料2',
            borderWidth : 1,
            backgroundColor: 'rgb(255, 199, 132)',
            borderColor: 'rgb(225, 169, 122)',
            data: [ 45,10,30,10, 5, 2, 20]
        }]
    },

    // Configuration options go here
    options: {}
});

調整大小

<div class="chart-container" style="position: relative; height:50%; width:50%" >
<canvas id="myChart1" ></canvas>
</div>

chart.js官網：https://www.chartjs.org/docs/latest/
各種圖表範本：https://www.chartjs.org/samples/latest/

No related posts.