快捷導(dǎo)航

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

更新時(shí)間：2023年11月26日 11:21:39 作者：laocooon523857886

本文主要介紹了chart.js實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%!
String list="['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月']";
String label="'我的一個(gè)折線圖'";
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 軸上對(duì)應(yīng)的標(biāo)簽
const labels = <%=list%>;  // 設(shè)置 X 軸上對(duì)應(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)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果的文章就介紹到這了,更多相關(guān)chart.js 動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript框架(iframe)操作總結(jié)
這篇文章主要介紹了JavaScript框架(iframe)操作,介紹了種情況下的操作方法,需要的朋友可以參考下
2014-04-04
uniapp在開發(fā)app時(shí)上傳文件時(shí)的問(wèn)題記錄
在開發(fā)uniapp應(yīng)用時(shí),可能會(huì)遇到文件上傳功能在iOS和部分Android手機(jī)上不兼容的問(wèn)題,經(jīng)過(guò)對(duì)比分析,發(fā)現(xiàn)問(wèn)題可能出在文件的路徑上,通過(guò)使用uni.saveFile方法保存文件后,再上傳可以解決問(wèn)題,這篇文章詳細(xì)介紹了解決方案,并引導(dǎo)讀者參考更多相關(guān)內(nèi)容
2024-09-09
JavaScript 對(duì)Cookie 操作的封裝小結(jié)
通過(guò)本篇,您能了解到: 匿名函數(shù) 閉包的產(chǎn)生 JavaScript實(shí)現(xiàn)private 以及 public 訪問(wèn)權(quán)限 document.cookie 的操作
2009-12-12
javascript Table 中2個(gè)列（TD）的交換實(shí)現(xiàn)代碼
非常不錯(cuò)的用js控制talbe中td的位置的實(shí)現(xiàn)代碼。
2009-02-02
weUI應(yīng)用之JS常用信息提示彈層的封裝
這篇文章主要為大家詳細(xì)介紹了weUI應(yīng)用中利用JS封裝幾個(gè)常用的信息提示彈層的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
詳解JavaScript邏輯Not運(yùn)算符
這篇文章主要介紹了JavaScript邏輯Not運(yùn)算符，邏輯NOT運(yùn)算符與C和Java中的邏輯 NOT 運(yùn)算符相同，都由感嘆號(hào)（!）表示，想要深入了解邏輯Not運(yùn)算符的朋友可以參考一下
2015-12-12
使用indexOf等在JavaScript的數(shù)組中進(jìn)行元素查找和替換
使用slice、replace、indexOf等等在JavaScript的數(shù)組中進(jìn)行元素的查找和替換，感興趣的朋友可以學(xué)習(xí)下
2013-09-09
javascript中打印當(dāng)前的時(shí)間實(shí)現(xiàn)思路及代碼
打印當(dāng)前的時(shí)間的方法有很多，在本文為大家詳細(xì)介紹下使用javascript是如何做到的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2013-12-12
JavaScript Array擴(kuò)展實(shí)現(xiàn)代碼
最近看了一下developer.mozilla.org里的東西，發(fā)現(xiàn)它為Array對(duì)象添加了不少generic method，趕得上Prototype的熱心程度。
2009-10-10
Javascript ES6中對(duì)象類型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07