Chart.js 上手實踐

Chart.js使用起來相比D3.js更加容易和靈活，很適合用來實現一些基本的圖表展現。

Chart.js官網：www.chartjs.org/

最新版本：v2.x

安裝：參考官方文檔

官方文檔對於各類圖表的例子都是比較淺顯的介紹，對於一些參數缺乏具體的例子。這裏主要以Line Chart爲例對相關參數配置進行分析。

1. 基礎樣式

這裏統計一個學生的每一個月月考成績（英語和數學），經過曲線圖進行展現。

代碼以下：

<canvas id="myChart" width="400" height="400"></canvas>

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

// x-axis數據 月數
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// y-axis數據 成績
var english = [86, 78, 91, 84, 88, 90, 77, 70, 87, 97];
var math = [97, 91, 95, 88, 81, 90, 78, 84, 90, 77];

// 獲取canvas做爲繪圖的上下文
var ctx = document.getElementById('myChart').getContext('2d');

// 生成對應的圖表
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: month,
        datasets: [{
            label: 'English',
            data: english
        },
        {
            label: "Math",
            data: math,
        }]
    }
});
</script>
複製代碼

上述代碼能夠繪製出最簡單的圖表，以下圖所示:

data對象中，有三個屬性：

• type：指定圖表類型。

• datasets：指定數據集合。datasets中的每一個對象就是一組數據集合，本例子中就是對應的每條曲線。

• options: 配置參數。用來配置圖表的額外信息，如圖表的標題，x軸和y軸的設置等。

2. 修改圖表樣式

這裏修改線條的默認顏色，取消線條下部的顏色填充，增長圖表的標題，設置圖例的樣式，修改tooltip的提示樣式。

詳細參數配置請參考：Line

代碼以下：

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: month,
        datasets: [{
            label: 'English',
            data: english,
            // 線條顏色
            borderColor: "rgba(68,190,190,1)",
            // 填充顏色
            fill: true, 
            // 線條下方的填充顏色
            backgroundColor: "rgba(68,190,190,.3)"
        },
        {
            label: "Math",
            data: math,
            borderColor: "rgba(250,150,30,1)",
            // 取消填充後，只有圖例中會顯示相應背景色
            backgroundColor: "rgba(250,150,30,.3)",
            // 取消填充
            fill: false
        }]
    },
    options: {
        // 圖表標題
        title: {
            display: true,
            text: "月考成績曲線圖"
        },
        // 圖例設置
        legend: {
            labels: {
                padding: 30,
                // 使用圓形樣式
                usePointStyle: true
            },
            // 顯示位置
            position: 'bottom'
        },
        // tooltip提示樣式
        tooltips: {
            enabled: true,
            // 同時顯示x軸上的數據
            // 這裏鼠標移到對應點上會同時顯示english和math的成績
            mode: 'index',
            // 經過回調修改tooltips的標題
            callbacks: {
                title: function (item) {
                    return "第" + item[0].xLabel + "月"
                }
            }
        }
    }
});
複製代碼

修改後圖表以下圖所示：

修改後的tooltip顯示效果以下圖所示：

這裏修改了tooltip的標題，並同時顯示該x軸位置的全部數據，english和math。

更多tooltip的配置請參考：Tooltips

目前y軸的值是直接從70開始，這裏默認選取了y軸的最小值做爲起始值。若是要改成從其餘值開始，這裏就要對options中的scales屬性進行修改。

3. Scales

scales能夠對x軸和y軸的對應的屬性進行修改，其中ticks屬性能夠修改對應軸的起始值。

代碼以下：

options: {
        // 圖表標題
        title: {
            display: true,
            text: "月考成績曲線圖"
        },
        
        ...
        
        scales: {
            // x軸
            xAxes: [{
                // 背景網格
                gridLines: {
                    // 取消x軸的豎線
                    display: false,
                    // 設置x軸線顏色
                    color: "black",
                },
                // x軸標題
                scaleLabel: {
                    display: true,
                    labelString: "考試月數",
                },
            }],
            // y軸
            yAxes: [{
                gridLines: {
                    color: "black",
                    // 以點線顯示
                    borderDash: [2, 5],
                },
                scaleLabel: {
                    display: true,
                    labelString: "分數",
                },
                // 設置起止數據和步長
                ticks: {
                    min: 60,
                    max: 100,
                    stepSize: 5
                }
            }]
        }
    }
複製代碼

修改後圖表以下圖所示：

4. 參考

1. code.tutsplus.com/tutorials/g…

2. tobiasahlin.com/blog/chartj…