用 Chart.js 製作圖表

想要在網頁上畫出動態圖表，除了 d3.js 外，Chart.js 也是一個很好的選擇。

Chart.js 較之 d3.js 更容易上手，雖然功能不如 d3.js 強大，
但是基本的圖表功能都有提供現成的 API 可以參考，因此若是想要簡單快速的畫出動態基本圖表，
Chart.js 不失為一個很好的選擇。

下列簡單舉一個曲線圖為小小範例： 曲線圖

準備 canvas 物件 - Html

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

載入 Chart.js 核心

可以直接到 Chart.js 官網下載，或是使用官方提供 Chart.js CDN 載入

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>

先建圖表資料 - Javascript

var lineChartData = {
    labels: ["3", "6", "9", "12", "15", "18", "21", "24", "27"], //顯示區間名稱
    datasets: [{
        label: '未曾使用', // tootip 出現的名稱
        lineTension: 0, // 曲線的彎度，設0 表示直線
        backgroundColor: "#ea464d",
        borderColor: "#ea464d",
        borderWidth: 5,
        data: [10, 12, 15, 18, 22, 33, 50, 60, 130], // 資料
        fill: false, // 是否填滿色彩
    }, {
        label: '罹癌後開始使用',
        lineTension: 0,
        fill: false,
        backgroundColor: "#29b288",
        borderColor: "#29b288",
        borderWidth: 5,
        data: [12, 14, 18, 20, 21, 34, 60, 80, 200],
    },]
};

開始畫圖 - Javascript

function drawLineCanvas(ctx,data) {
    window.myLine = new Chart(ctx, {  //先建立一個 chart
        type: 'line', // 型態
        data: data,
        options: {
                responsive: true,
                legend: { //是否要顯示圖示
                    display: true,
                },
                tooltips: { //是否要顯示 tooltip
                    enabled: true
                },
                scales: {  //是否要顯示 x、y 軸
                    xAxes: [{
                        display: true
                    }],
                    yAxes: [{
                        display: true
                    }]
                },
            }
    });
};

呼叫 - Javascript

window.onload = function () {
    var ctx = document.getElementById("canvas").getContext("2d");
    drawLineCanvas(ctx,lineChartData);
};

這樣就完成一個完整的曲線圖了，
上述例子之所以寫成 function 去呼叫，是為了如果有要動態產生資料來畫多個曲線圖，會比較方便。

使用 Chart.js 只要好好注意資料不要填錯就可以很方便的使用囉！