數據可視化--Chart.js使用總結

概述

Chart.js是一個HTML5圖表庫，使用canvas元素來展現各式各樣的客戶端圖表，支持折線圖、柱形圖、雷達圖、餅圖、環形圖等。在每種圖表中，還包含了大量的自定義選項，包括動畫展現形式。 Chart.js比較輕量（gzip版本僅4.5k），且不依賴其餘庫。
Chart.js官網: http://www.chartjs.org/

使用步驟

第一步：安裝

npm:npm install chart.js --save
Bower:bower install chart.js --save
CDN:https://cdnjs.com/libraries/Chart.js

第二步：引入

ES6:

import Chart from 'chart.js';
let myChart = new Chart(ctx, {...});

Script Tag:

<script src="path/to/chartjs/dist/Chart.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

Common JS:

var Chart = require('chart.js');
var myChart = new Chart(ctx, {...});

Require JS:

require(['path/to/chartjs/dist/Chart.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});

第三步: 使用

<canvas id="myChart" width="400" height="400"></canvas>
<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

在線查看連接：https://codepen.io/lilywang/f...

配置介紹

new Chart(ctx, {
    type: 'MyType',
    data: data,
    options: options
});

type

['line','bar', 'radar', 'polarArea', 'doughnut', 'pie', 'bubble']

data、options

因爲圖表type不一樣，data的配置也就不一樣，這裏以折線圖的使用方法舉例:

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: 'red',
        backgroundColor: 'blue',//填充色
        borderColor: 'green',//曲線邊框色,
        borderWidth: 2,//曲線的寬度
        borderDash: [2, 3],
        fill: true, //
        pointBackgroundColor: 'purple',//數據點的填充色
        pointBorderColor: 'blue',//數據點邊框顏色
        pointBorderWidth: 2,//數據點邊框的寬度
        pointRadius: 2, //數據點的大小
        pointStyle:'circle',//'cross''crossRot''dash''line''rect''rectRounded''rectRot''star''triangle'
        showLine: true, //若是爲false,兩數據點之間的線不會渲染
        spanGaps: true, //若是爲false,NaN data會在折線上有斷點
        steppedLine: true,//可選值[false, true, 'before', 'after'],爲true,折線圖的曲線會成直角，
        //將要在圖上展現的數據，數組中的每個object表明一條線
        datasets: [{
　　　　　　　// 顏色的使用相似於CSS，你也能夠使用RGB、HEX或者HSL
　　　　　　　// rgba顏色中最後一個值表明透明度
　　　　　　　// 填充顏色
            fillColor : "rgba(220,220,220,0.5)",
　　　　　　　// 線的顏色
            strokeColor : "rgba(220,220,220,1)",
　　　　　　　// 點的填充顏色
            pointColor : "rgba(220,220,220,1)",
　　　　　　　　// 點的邊線顏色
            pointStrokeColor : "#fff",
　　　　　　　　// 與x軸標示對應的數據
            data : [65,59,90,81,56,55,40]
        },{
            fillColor : "rgba(151,187,205,0)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }]
    }
    options: {
        responsive: true,//圖表是否響應式
        //圖表標題相關配置  
        title: {
            display: true,
            text: '狀態歷史圖',
            fontFamily: 'Helvetica',
            padding: 20,
            fontSize: 16,
            lineHeight: 1.2,
        },
        //圖例
        legend: {
            display: false,
        },
        tooltips: {
            titleFontFamily: 'Helvetica Neue',
            titleFontSize: 14,
            yPadding: 14,
            xPadding: 8,
            bodyFontSize: 14,
            titleMarginBottom: 10,
            position: 'nearest',//tooltips就近顯示
            callbacks: {
                //可自定義tooltips上顯示的文字
                label(tooltipItem, data) {
                    return `狀態: ${tooltipItem.yLabel === 0 ? '離線' : '在線'}`;
                }
            }
    
        },
        //座標軸
        scales: {
            scaleLabel: {
                display: true,
                labelString: '狀態'
            },
            ticks: {
                fontSize: 18,
                fontColor: 'red',
            },
            //y軸配置
            yAxes: [{
                type: 'linear',
                labels: [0，1],//y軸上的顯示的數據
                beginAtZero: true,//是否從零開始
                //軸文字控制
                ticks: {
                    //可自定義y軸顯示上顯示的文字
                    callback(value, index, values) {
                        return value === 0 ? '離線' : '在線' 
                    },
                    min: 0,//最小值，記得軸的type要爲linear
                    max: 1,//最大值，記得軸的type要爲linear
                    stepSize: 1,//數字之間的間隔,設置以後例如: [2,3,4]
                }
            }],
            //x軸配置
            xAxes: [{
                type: 'category',
                labels: dateList,
                distribution: 'linear'
            }]
        },
        //整個圖表配置
        layout: {
            //設置圖表的padding值
            padding: {
                left: 50,
                right: 0,
                top: 20,
                bottom: 0
            }
        }
    }
});

還有其它類型的圖表配置就不一一贅述了，使用方式都大同小異。

使用中遇到過的問題

在切換時間從新渲染圖表時遇到，當切換到昨天，鼠標hover圖表時，圖表上折線會出現今天的折線，猜想緣由是在切換tab的時候上一個Chart實例還存在，致使衝突出現這個問題。附上解決思路是:每次切換tab時移除舊的canvas畫布並新建畫布，代碼以下:

resetCanvas() {
    let html = '<canvas id="myChart" width="400" height="160"><canvas>'
    let chartsContainer = document.getElementById("chartsContainer");//canvas外的容器
    let myChart = document.getElementById("myChart")//canvas節點
    statusCharts.removeChild(myChart);
    statusCharts.innerHTML = html
    myChart = document.getElementById("myChart");
    statusCharts.appendChild(myChart);
},