jQuery Highcharts折線圖案例分析
Highcharts是一款功能非常強大的jQuery圖表應用,利用Highcharts可以建立很多外觀漂亮而且資料展示靈活的網頁圖表。本文主要介紹了利用Highcharts實現的折線圖,並將部分程式碼分享給大家。
效果圖如下所示:
js指令碼引用:
<script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="js/Index/raphael.2.1.0.min.js" type="text/javascript"></script> <script src="js/Index/justgage.1.0.1.js" type="text/javascript"></script> <script src="Js/Index/highcharts.js" type="text/javascript"></script> <script src="Js/Index/exporting.js" type="text/javascript"></script>
定時重新整理:
//曲線圖 ar chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'divChart', //放置圖表的容器 plotBackgroundColor: null, plotBorderWidth: null, defaultSeriesType: 'line' }, title: { text: '24小時負荷曲線' }, subtitle: { text: '' }, xAxis: {//X軸資料 categories: ['00','01', '02','03', '04','05', '06','07', '08','09', '10','11', '12','13', '14','15', '16','17', '18','19', '20','21', '22','23'], labels: { rotation: -45, //字型傾斜 align: 'right', style: { font: 'normal 12px 宋體' } } }, yAxis: {//Y軸顯示文字 title: { text: 'MW' } }, tooltip: { enabled: true, formatter: function() { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1); } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true//是否顯示title } }, series: [{ name: '1號機組', data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },{ name: '2號機組', data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] }] }); function getForm(){ $.ajax({ type: "POST", //要用post方式 url: "WebServiceFH.asmx/GetLoadEveryHourByOne", contentType: "application/json", data: {}, dataType: "json", success: function (data) { var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]]; chart.series[0].setData(data); }, error: function (err) { alert("讀取資料出錯!"); } }); $.ajax({ type: "POST", //要用post方式 url: "WebServiceFH.asmx/GetLoadEveryHourByTwo", contentType: "application/json", dataType: "json", success: function (data) { var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]]; chart.series[1].setData(data); }, error: function (err) { alert("讀取資料出錯!"); } }); } $(document).ready(function() { //每隔3秒自動呼叫方法,實現圖表的實時更新 getForm(); window.setInterval(getForm,600000); }); });
此處注意:
var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]]; chart.series[0].setData(data);
body中只需要:
<div id="divChart"> </div>
希望本文所述對大家的jQuery程式設計有所幫助。
相關文章
- echarts折線圖Echarts
- echarts - 折線圖Echarts
- R : 折線圖
- 微信小程式折線圖表折線圖加區域圖微信小程式
- matlab畫折線圖Matlab
- echarts 折線圖拼接Echarts
- ECHARTS-折線圖不顯示資料 控制折線圖顏色Echarts
- excel折線圖自定x軸y軸 excel折線圖xy設定Excel
- PyQtGraph繪製折線圖QT
- AnyChart繪製折線圖
- Matplotlib 繪製折線圖
- MATLAB 繪製折線圖Matlab
- Python畫圖——matplotlib(普通折線圖)Python
- Echarts資料視覺化:圖表篇(2)—— 折線圖、堆疊面積折線圖Echarts視覺化
- Highcharts繪製餅圖
- Flutter 實現平滑曲線折線圖Flutter
- PHP 生成折線圖和餅圖等PHP
- Python視覺化-折線圖Python視覺化
- Android 折線圖之hellocharts (餅狀圖)餅圖Android
- 【highcharts應用-雙餅圖】
- amCharts繪製帶趨勢線折線圖
- D3.js上手——折線圖JS
- Python視覺化(1):折線圖Python視覺化
- echart折線圖異常多出一條連線線
- amCharts繪製折線圖和柱狀圖混合
- 資料視覺化圖表之折線圖視覺化
- Highcharts 圖上文字重影問題
- MVC實現EChatrs動態折線圖MVC
- iOS使用Charts框架繪製折線圖iOS框架
- 自定義控制元件之kotlin繪製折線圖和曲線圖控制元件Kotlin
- Tableau——資料前處理、折線圖、餅圖(環形圖)
- Python Pandas 時間序列雙軸折線圖Python
- Chart.js繪製動態折線圖JS
- Qwt開發筆記(二):Qwt基礎框架介紹、折線圖介紹、折線圖Demo以及程式碼詳解筆記框架
- Highcharts 實現自定義匯出圖片
- Flutter自定義折線圖並新增點選事件Flutter事件
- 使用chart.js製作動態折線圖JS
- 用Python的random模組繪製折線圖Pythonrandom
- 在微信小程式中使用 echarts 圖片-例 折線圖微信小程式Echarts