使用Chart.js繪製折線圖

1.新建一個WEB項目，在jsp頁面中導入chart.js文件。PS：這裏使用的是2.0版本

2.JSP中添加一個div塊

<div style="width:800px;height:260px;">
 	<canvas style="width:600px;height:200px;margin:auto;" id="chartCanvas"></canvas>
</div>

3.JS代碼

var labels = [1,2,3,4,5];//橫座標數據
var datas = [10,30,20,50,40];//縱座標數據
var dataInfos=
	{
		labels:labels,
		datasets:[
			{
			    fillColor:"transparent",
				backgroundColor:"rgba(254,225,231,0.5)",//背景色
				borderColor:"#FC8BA3",//線條顏色
				pointRadius:0,//數據點大小
				pointHitRadius:0,
				data:datas
			}
		]
	};

var ctx = document.getElementById("chartCanvas").getContext("2d");
var myLineChart = new Chart(ctx,{
	type:'line',
	data:dataInfos,
	options:{
			legend:{
				display:false //屏蔽標題
			},
			responsive:true,
			tooltips:{
				mode:'single',
			},
			scales:{
				xAxes:[{
					borderColor:'transparent',
					ticks:{
						autoSkip:false,
						maxRotation:0,
					},
					gridLines:{
						isplay:false,
					},
				}],
				yAxes:[{
					gridLines:{
						display:true,
					},
				}]
			}
	}
});

4.效果展示