利用chart.js来完成动态网页显示拆线图的效果

javascript 复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%!
String list="['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月']";
String label="'我的一个折线图'";
String data ="[65, 59, 80, 81, 56, 55, 40]";

%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程</title>
<script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
<style type="text/css">
div {
	width: 600px;
	height: 300px;
}
</style>
</head>
<body>
<div>
<canvas id="myChart" width="400" height="200"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart');
ctx.width = 300;
ctx.height =150;
//const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 设置 X 轴上对应的标签
const labels = <%=list%>;  // 设置 X 轴上对应的标签
const data = {
  labels: labels,
  datasets: [{
    label: <%=label%>,
    data: <%=data%>,
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
    tension: 0.1
  }]
};
const config = {
  type: 'line', // 设置图表类型
  data: data,
};
const myChart = new Chart(ctx, config);
</script>

</body>
</html>
相关推荐
Zz_waiting.5 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
叫我阿柒啊6 分钟前
Java全栈开发面试实战:从基础到微服务的完整技术栈解析
java·spring boot·微服务·前端框架·vue·jwt·全栈开发
前行的小黑炭7 分钟前
Android:在项目当中可能会遇到的ANR,应该如何解决?
android·java·kotlin
索迪迈科技1 小时前
Flink Task线程处理模型:Mailbox
java·大数据·开发语言·数据结构·算法·flink
float_六七5 小时前
IntelliJ IDEA双击Ctrl的妙用
java·ide·intellij-idea
能摆一天是一天6 小时前
JAVA stream().flatMap()
java·windows
颜如玉7 小时前
🤲🏻🤲🏻🤲🏻临时重定向一定要能重定向🤲🏻🤲🏻🤲🏻
java·http·源码
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
星空寻流年8 小时前
设计模式第一章(建造者模式)
java·设计模式·建造者模式