JS highcharts實(shí)現(xiàn)動(dòng)態(tài)曲線代碼示例
Highcharts是一個(gè)制作圖表的純Javascript類庫(kù),
主要特性如下:
兼容性:兼容當(dāng)今所有的瀏覽器,包括iPhone、IE和火狐等等;
對(duì)個(gè)人用戶完全免費(fèi);
純JS,無(wú)BS;
支持大部分的圖表類型:直線圖,曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅裝圖、散布圖;
跨語(yǔ)言:不管是PHP、.net還是Java都可以使用,它只需要三個(gè)文件:一個(gè)是
Highcharts的核心文件highcharts.js,還有a canvas emulator for IE和Jquery類庫(kù)或者M(jìn)ooTools類庫(kù);
提示功能:鼠標(biāo)移動(dòng)到圖表的某一點(diǎn)上有提示信息;
放大功能:選中圖表部分放大,近距離觀察圖表;
易用性:無(wú)需要特殊的開(kāi)發(fā)技能,只需要設(shè)置一下選項(xiàng)就可以制作適合自己的圖表;
時(shí)間軸:可以精確到毫秒;
其官網(wǎng)網(wǎng)站為:http://www.highcharts.com/ !
里面有他們的例子和參考代碼,可以參考著實(shí)現(xiàn)自己的應(yīng)用,如果你做的是靜態(tài)的圖形展示,那么使用是非常簡(jiǎn)單的!
參照官網(wǎng)的一個(gè)例子,我來(lái)實(shí)現(xiàn)一個(gè)動(dòng)態(tài)曲線的應(yīng)用:
效果如下:
這個(gè)曲線是動(dòng)態(tài)的,他的官網(wǎng)效果地址:http://www.highcharts.com/demo/dynamic-update !
我把他應(yīng)用到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: '<b>Java小強(qiáng)制作</b>' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: '單位:M' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><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的樣式可以自己調(diào)節(jié),需要關(guān)注的是兩個(gè)點(diǎn):
他需要的數(shù)據(jù)格式是雙維數(shù)組
數(shù)據(jù)的更新是因?yàn)?chart 對(duì)象里面有一個(gè) events 屬性,里面定義方法使用 addPoint 實(shí)現(xiàn)數(shù)據(jù)點(diǎn)的增加和刷新!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn)
- highcharts.js數(shù)據(jù)綁定方式代碼實(shí)例
- Javascript highcharts 餅圖顯示數(shù)量和百分比實(shí)例代碼
- html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例
- 淺析jquery的js圖表組件highcharts
- Highcharts 非常實(shí)用的Javascript統(tǒng)計(jì)圖demo示例
- 純JAVASCRIPT圖表動(dòng)畫(huà)插件Highcharts Examples
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- JavaScript圖表插件highcharts詳解
相關(guān)文章
php對(duì)mongodb的擴(kuò)展(初識(shí)如故)
mongodb的數(shù)據(jù)存儲(chǔ)格式是一種由于MongoDB的文檔結(jié)構(gòu)為BJSON格式(BJSON全稱:Binary JSON),而B(niǎo)JSON格式本身就支持保存二進(jìn)制格式的數(shù)據(jù),因此可以把文件的二進(jìn)制格式的數(shù)據(jù)直接保存到MongoDB的文檔結(jié)構(gòu)中2012-11-11動(dòng)態(tài)加載JavaScript文件的3種方式
第一種是使用document.write/writeln()方式,第二種使用jQuery,第三種是使用原生js方法,感興趣的小伙伴們可以參考一下2018-05-05JavaScript控制輸入框中只能輸入中文、數(shù)字和英文的方法【基于正則實(shí)現(xiàn)】
這篇文章主要介紹了JavaScript控制輸入框中只能輸入中文、數(shù)字和英文的方法,基于正則驗(yàn)證實(shí)現(xiàn)字符輸入限制功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03javascript計(jì)算當(dāng)月剩余天數(shù)(天數(shù)計(jì)算器)示例代碼
本文介紹了利用Javascript在網(wǎng)頁(yè)上計(jì)算當(dāng)前月份的剩余天數(shù)的方法,大家參考使用吧2014-01-01修改源碼來(lái)解決el-select值不匹配導(dǎo)致回顯id的問(wèn)題
el-select數(shù)據(jù)的回顯是根據(jù)id去匹配值的,最近項(xiàng)目出現(xiàn)了回顯id的情況,一查是沒(méi)有匹配數(shù)據(jù)的問(wèn)題,于是就想怎么處理(針對(duì)單選的情況),本文小編給大家介紹了用修改源碼來(lái)解決el-select值不匹配導(dǎo)致回顯id的問(wèn)題,需要的朋友可以參考下2024-09-09小程序?qū)崿F(xiàn)短信登錄倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)短信登錄倒計(jì)時(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07使用webpack搭建pixi.js開(kāi)發(fā)環(huán)境
這篇文章主要介紹了使用webpack搭建pixi.js開(kāi)發(fā)環(huán)境,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02