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>
利用chart.js来完成动态网页显示拆线图的效果
laocooon5238578862023-11-26 9:59
相关推荐
Mutig_s8 分钟前
如何理解MVCC无理 Java17 分钟前
【技术解析】消息中间件MQ:从原理到RabbitMQ实战(深入浅出)菜鸟求带飞_26 分钟前
算法打卡:第十一章 图论part04iQM7530 分钟前
Spring Boot 2.x基础教程:实现文件上传pumpkin8451434 分钟前
Spring Boot 从 2.7.x 升级到 3.3注意事项2402_8575834934 分钟前
蜗牛兼职网:Spring Boot框架应用菜到极致就是渣34 分钟前
Java如何操作Elasticsearch全栈学姐42 分钟前
springbootKPL比赛网上售票系统Ylucius42 分钟前
苍穹外卖学习日志 -----20天项目从零到完结-----含软件下载,环境配置,框架学习,代码编写,报错处理,测试联调,每日总结,心路历程等等......蓝影铁哥43 分钟前
SpringBoot3核心特性-核心原理