chart.js 常用用法记录

1、添加 canvas：

<div style="width: 98%; height: 400px;">
    <canvas id="canvas_uploaddata_radar" style="width: 100%; height: 100%;"></canvas>
</div>

2、引入js库和CSS

<!-- chart.js -->
<style>
canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
</style>

<script src="static/js/Chart.bundle.js"></script>
<script type="text/javascript" src="static/js/utils.js"></script>
<!-- chart.js -->

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

<script>
		var config_uploaddata_line = {
			type: 'line',
			data: {
				labels: ${charts.labels}, 
				datasets: [{
					label: '${charts.typeName1}',
					fill: false,
					backgroundColor:  'rgba(112, 0,219, 0.8)',
					borderColor: 'rgba(112, 0,219, 0.8)',
					pointBackgroundColor: 'rgba(54, 162, 235, 0.8)',
					data: ${charts.data1},
					yAxisID: "left_1"
				},
				{
					label: '${charts.typeName2}',
					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)',
					data: ${charts.data2},
					yAxisID: "left_2"
				},
				{
					label:  '${charts.typeName3}',
					fill: false,
					hidden: true,
					backgroundColor: 'rgba(230, 0, 145, 0.8)',
					borderColor: 'rgba(230, 0, 145, 0.8)',
					pointBackgroundColor: 'rgba(153, 102, 255, 0.8)',
					data: ${charts.data3},
					yAxisID: "left_3"
				},
				{
					label:  '${charts.typeName4}',
					fill: false,
					hidden: true,
					backgroundColor:  'rgba(246, 80, 0, 0.8)',
					borderColor:  'rgba(246, 80, 0, 0.8)',
					pointBackgroundColor: 'rgba(255, 99, 132, 0.8)',
					data: ${charts.data4},
					yAxisID: "left_4"
				},
				{
					label: '${charts.typeName5}',
					fill: false,
					hidden: true,
					backgroundColor: 'rgba(233, 134, 0, 0.8)',
					borderColor: 'rgba(233, 134, 0, 0.8)',
					pointBackgroundColor: 'rgba(255, 99, 132, 0.8)',
					data: ${charts.data5},
					yAxisID: "left_5"
				},
				{
					label:  '${charts.typeName6}',
					fill: false,
					hidden: true,
					backgroundColor: 'rgba(245, 210,0, 0.8)',
					borderColor: 'rgba(245, 210, 0, 0.8)',
					pointBackgroundColor: 'rgba(255, 99, 132, 0.8)',
					data: ${charts.data6},
					yAxisID: "left_6"
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: '此处为折线图的名称'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				legend: {
					position: 'bottom'
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为x轴名称'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴名称1'
						},
						position: 'left',
						id:"left_1"
					},
					{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴名称2'
						},
						position: 'right',
						id:"left_2"
					},
					{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴名称3'
						},
						id:"left_3",
						position: 'left'
						
					},
					{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴名称4'
						},
						id:"left_4",
						position: 'right'
					},
					{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴名称5'
						},
						id:"left_5",
						position: 'left'
					},
					{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '此处为Y轴名称6'
						},
						id:"left_6",
						position: 'right'
					}]
				}
			}
		};
</script>

以上为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事件中初始化。