使用Chart.js绘制折线图

最新推荐文章于 2025-07-08 15:07:10 发布

原创

最新推荐文章于 2025-07-08 15:07:10 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#.js #折线图

本文介绍了如何在WEB项目中使用Chart.js 2.0版本绘制折线图。首先，新建了一个WEB项目并在jsp页面导入了chart.js库。接着，在页面上创建了一个div元素作为图表容器。然后，通过JS编写代码来初始化和配置折线图。最后，展示了绘制完成的折线图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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:{
						autoSki