Chart.js-零碎知識整理

圖表的文字替代寫法

對於html的img標籤，有alt屬性，作用是在圖片加載不出來的時候，顯示alt的文字值。

同樣，因爲Chart.js的圖表都是基於canvas標籤的，所以當canvas加載失敗，也需要替代文字，寫法如下：

<canvas id="graph" width="400" height="100">
    <p>替代文字</p>
</canvas>

用貼圖作爲圖表背景

效果如圖：

代碼：

var img = new Image();
img.src = 'bg.png';
img.onload = function() {
    var ctx = document.getElementById('myChart2').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['1', '2', '3','4','5'],
            datasets: [{
                data: [10, 20, 30,40,50],
                backgroundColor: fillPattern
            }]
        }
    });
};

修改字體、字色、字號

用下面這條語句：

Chart.defaults.global.defaultFontColor = 'red';

這是全局設置字色。

defaultFontColor:字色
defaultFontFamily:字體
defaultFontSize:字號
defaultFontStyle:字樣式

也可以在options函數裏面進行局部設置：

options: {
        legend: {
            labels: {
                // 設置該表標籤的字色
                fontColor: 'black'
            }
        }
    }

對標籤的修改與設置

應該在options函數裏面設置：

options: {
        legend: {
            // 這裏設置
        }
    }

legend裏面的參數：

參數名	類型	默認值	描述
display	boolean	true	是否標籤顯示
position	string	'top'	標籤的位置。可選值：‘top’、‘bottom’、‘left’、‘right’
align	string	'center'	標籤的對齊方式。‘start’、‘center’、‘end’
onClick	function		點擊事件的回調函數
onHover	function		鼠標放置事件的回調函數
onLeave	function		鼠標離開事件的回調函數
reverse	boolean	false	標籤顯示的排序方式
labels	object		這是個對象，裏面還有許多參數，不再展開

對圖表標題的修改與設置

應該在options函數裏面設置：

options: {
        title: {
            // 這裏設置
        }
    }

名稱	類型	默認值	描述
display	boolean	false	是否顯示錶標題
position	string	'top'	表標題的位置
fontSize	number	12	字號
fontFamily	string	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	字體
fontColor	Color	'#666'	顏色
fontStyle	string	'bold'	樣式
padding	number	10	padding距離
lineHeight	number|string	1.2	行高
text	string|string[]	''	title文字內容

銷燬圖表

myLineChart.destroy();

更新圖表

在圖表的datasets改變後，重新渲染圖表。

myLineChart.update();

可以用此來實現圖表的動態更新功能，見下面的代碼：

var ctx = $('#myChart3');
var myChart3 = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['徐鳳年', '裴南葦', '曹長卿', '李淳罡', '王仙芝', '溫華'],
        datasets: [{
            label: '# of 戰力',
            data: [100, 110, 120, 70, 140, 10],
            backgroundColor: [
                '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)'
            ],
            borderColor:'black',
            borderWidth: 2
        }]
    },
    options: {
        title: {
                display: true,
                text: '動態更新圖'
            },
           

    }
});
function sleep(ms){//時間延遲函數
    return new Promise(resolve =>setTimeout(resolve,ms))
}
async function test() {
    while(1){
        await sleep(1000)
        myChart3.data.datasets[0].data.shift();
        myChart3.update(); 
        myChart3.data.datasets[0].data.push(Math.random()*100);
        myChart3.update();
    }      
}

test()

如下圖：