Chart.js图表工具 曲线图简单使用笔记

1.项目添加  Chart.bundle.js 、utils.js文件

2.jsp写入<canvas id="line" height="300" width="500"></canvas>标签

3.  <script type="text/javascript"></script >标签内画图实例代码如下：

      var lineChartData = {
type: 'line', //为图表类型：line 曲线图 bar 柱状图等等,详细请查阅api
data: {
labels: ["周一","周二","周三","周四","周五","周六"],
datasets: [{
label: '本周',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [<%=nums%>], //为后台传入数据以逗号隔开
fill: false,
}]
},
options: {
responsive: true,
title: {
display: true,
text: ''
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}]
}
}
};

         window.onload = function() {
var ctx = document.getElementById('line').getContext('2d');
window.myLine = new Chart(ctx, lineChartData);

};//执行绘图js