使用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.效果展示