欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

chart.js實(shí)現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果

 更新時間：2023年11月26日 11:21:39   作者：laocooon523857886  
本文主要介紹了chart.js實(shí)現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

<%@ 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 = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 設(shè)置 X 軸上對應(yīng)的標(biāo)簽
const labels = <%=list%>;  // 設(shè)置 X 軸上對應(yīng)的標(biāo)簽
const data = {
  labels: labels,
  datasets: [{
    label: <%=label%>,
    data: <%=data%>,
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // 設(shè)置線的顏色
    tension: 0.1
  }]
};
const config = {
  type: 'line', // 設(shè)置圖表類型
  data: data,
};
const myChart = new Chart(ctx, config);
</script>
 
</body>
</html>

到此這篇關(guān)于chart.js實(shí)現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果的文章就介紹到這了,更多相關(guān)chart.js 動態(tài)網(wǎng)頁顯示拆線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論