chart.js 常用用法记录

1、添加 canvas：

2、引入js库和CSS

3、折线图主要属性与设置

以上为6个Y轴的折线图。

主要参数说明：

yAxisID: "left_1"：   x轴对应的Y轴，Y轴 "left_1" 在下方定义；

                yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴的名称1'
						},
						position: 'left',  //定义y轴的位置，左侧显示
						id:"left_1"    // 指定Y轴的ID，前面数据需要引用，用于和Y轴绑定
					},
					{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴的名称2'
						},
						position: 'right',   //右侧显示
						id:"left_2"
					}]

数据集中，

fill: false    是否填充

hidden: true   初始化时是否隐藏

backgroundColor: 'rgba(187, 0, 206, 0.8)',   
borderColor: 'rgba(187, 0, 206, 0.8)',
pointBackgroundColor: 'rgba(255, 99, 132, 0.8)',

上面是三个颜色的设置，试一下就可以很清楚的知道用法。

yAxisID: "left_2"    关键属性，用于多Y轴时（多座标系统），指定绑定的Y轴。ID为Y轴的ID。

 

legend: {
   position: 'bottom'
}

图标的位置，可以在上下左右等位置。

 

4、初始化

window.onload = function() {			
    var ctx_uploaddata = document.getElementById('canvas_uploaddata').getContext('2d');
	window.myBar = new Chart(ctx_uploaddata, config_uploaddata);			
};

在onload事件中初始化。