chart.js實現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果
更新時間：2023年11月26日 11:21:39 作者：laocooon523857886
本文主要介紹了chart.js實現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果,文中通過示例代碼介紹的非常詳細,對大家的學(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)的標簽
const labels = <%=list%>; // 設(shè)置 X 軸上對應(yīng)的標簽
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實現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果的文章就介紹到這了,更多相關(guān)chart.js 動態(tài)網(wǎng)頁顯示拆線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Chart.js與ECharts.js圖表使用過程組件對比
- 用chart.js添加動態(tài)背景圖
- Chart.js功能與使用方法小結(jié)
- vue集成chart.js的實現(xiàn)方法
- 使用Vue.js 和Chart.js制作絢麗多彩的圖表
- Chart.js 輕量級HTML5圖表繪制工具庫（知識整理）
- 詳解Chart.js輕量級圖表庫的使用經(jīng)驗
- Chart.js在Laravel項目中的應(yīng)用示例
- 在 Angular 中使用Chart.js 和 ng2-charts的示例代碼
- ichart.js繪制虛線、平均分虛線效果的實現(xiàn)代碼
- 使用Chart.js圖表庫制作漂亮的響應(yīng)式表單
相關(guān)文章
本篇文章主要介紹了ES6關(guān)于Promise的用法詳解，詳細的介紹了Promise的三種狀態(tài)和方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
echarts拖拽滑塊dataZoom-slider自定義樣式簡單適配移動端
在電腦端和移動端的數(shù)據(jù)展示中,針對移動端的特殊性,進行了一系列優(yōu)化措施,這篇文章主要介紹了echarts拖拽滑塊dataZoom-slider自定義樣式簡單適配移動端的相關(guān)資料,需要的朋友可以參考下2024-09-09
本文通過實例代碼給大家介紹了js實現(xiàn)彈出框的拖拽效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了如何使用?JavaScript?讀取文件,您可以使用?JavaScript?File?API?加載選定文件的內(nèi)容，本節(jié)介紹?File?API?的基本用法，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Javascript原型與原型鏈深入詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了JS實現(xiàn)簡單的右下角彈出提示窗口的方法,可實現(xiàn)點擊連接右下角彈出提示框的功能,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法
這篇文章主要介紹了小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了前端打斷點debugger使用的相關(guān)資料,包括如何設(shè)置斷點、如何使用調(diào)試按鈕以及如何查看變量,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了從parcel.js打包出錯到選擇nvm的全部過程，需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細介紹了原生js實現(xiàn)點擊按鈕復(fù)制文本的相關(guān)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04