JS highcharts實現動態曲線程式碼示例
阿新 • • 發佈:2020-10-18
Highcharts是一個製作圖表的純Javascript類庫,
主要特性如下:
相容性:相容當今所有的瀏覽器,包括iPhone、IE和火狐等等;
對個人使用者完全免費;
純JS,無BS;
支援大部分的圖表型別:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散佈圖;
跨語言:不管是PHP、.net還是Java都可以使用,它只需要三個檔案:一個是
Highcharts的核心檔案highcharts.js,還有a canvas emulator for IE和Jquery類庫或者MooTools類庫;
提示功能:滑鼠移動到圖表的某一點上有提示資訊;
放大功能:選中圖表部分放大,近距離觀察圖表;
易用性:無需要特殊的開發技能,只需要設定一下選項就可以製作適合自己的圖表;
時間軸:可以精確到毫秒;
其官網網站為:http://www.highcharts.com/ !
裡面有他們的例子和參考程式碼,可以參考著實現自己的應用,如果你做的是靜態的圖形展示,那麼使用是非常簡單的!
參照官網的一個例子,我來實現一個動態曲線的應用:
效果如下:
這個曲線是動態的,他的官網效果地址:http://www.highcharts.com/demo/dynamic-update !
我把他應用到JSP中,程式碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>Highcharts Example</title> <script language="javascript" type="text/javascript" src="jquery.min.js"></script> <script language="javascript" type="text/javascript" src="highcharts.js"></script> <script language="javascript" type="text/javascript" src="exporting.js"></script> <script type="text/javascript"> $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container',type: 'spline',marginRight: 10,events: { load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function() { var x = (new Date()).getTime(),// current time y = Math.random(); series.addPoint([x,y],true,true); },1000); } } },title: { text: 'Java小強制作' },xAxis: { type: 'datetime',tickPixelInterval: 150 },yAxis: { title: { text: '單位:M' },plotLines: [{ value: 0,width: 1,color: '#808080' }] },tooltip: { formatter: function() { return ''+ this.series.name +'<br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x) +'<br/>'+ Highcharts.numberFormat(this.y,2); } },legend: { enabled: false },exporting: { enabled: false },series: [{ name: 'Random data',data: (function() { // generate an array of random data var data = [],time = (new Date()).getTime(),i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000,y: Math.random() }); } return data; })() }] }); }); </script> </head> <body> <div id="container" style="width: 800px;height: 400px"></div> </body> </html>
DIV的樣式可以自己調節,需要關注的是兩個點:
他需要的資料格式是雙維陣列
資料的更新是因為 chart 物件裡面有一個 events 屬性,裡面定義方法使用 addPoint 實現資料點的增加和重新整理!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。