<%@ 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>