歡迎您訪問鄭州興邦電子股份有限公司官方網(wǎng)站!
阿里巴巴誠信通企業(yè)
全國咨詢熱線:40000-63966
興邦電子,中國水控機第一品牌

聯(lián)系興邦電子

全國咨詢熱線:40000-63966

工廠:河南省 鄭州市 高新區(qū)蓮花街電子電器產(chǎn)業(yè)園

Highcharts web圖表工具

文章出處:http://forcongress-2020.com 作者:興邦開發(fā)部 人氣: 發(fā)表時間:2016年01月26日

[文章內(nèi)容簡介]:Highcharts是一種功能強大、開源、美觀、圖表豐富、兼容絕大多數(shù)瀏覽器的純js圖表庫

Highcharts  web圖表工具

Highcharts是一種功能強大、開源、美觀、圖表豐富、兼容絕大多數(shù)瀏覽器的純js圖表庫,配置使用也非常簡單!

Highcharts 的運行需要兩個 JS 文件, highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一個。

引入 JS 文件可以是引入本地文件和在線文件,針對不同的 JS 框架需要引入的文件有所不同,我們可以

1 引入在線資源:jQuery 是目前使用最廣泛的 JS 框架,無特殊說明,本教程所用的環(huán)境及所有例子都是基于 jQuery 的。<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 

2、Highcharts Standalone Framework

jQuery 目前用的最廣泛,但是其體積過大(100K 以上),在移動端網(wǎng)絡(luò)帶寬有限的情況下,并不是最優(yōu)選擇,如果你的頁面沒有其他地方需要用到 jQuery,jQuery 僅僅用于 highcharts,這種情況可以考慮使用 Highcharts Standalone Framework ,Highcharts Standalone Framework 壓縮后的大小只有 2k 哦。

<script src="http://cdn.hcharts.cn/highcharts/adapters/standalone-framework.js"></script>

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js" ></script>

3、高級功能

Highcharts 提供了圖表導(dǎo)出、圖表主題等其他額外功能,這些功能的實現(xiàn),需要額外引入相關(guān) JS 文件。

1、圖表導(dǎo)出功能

導(dǎo)出功能是將圖表導(dǎo)出下載為常見圖片文件或 PDF 文檔的功能,想要使用這個功能,額外引入 exporting.js 即可

<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js" type="text/javascript"></script> 

2、圖表主題

Highcharts 提供圖表更換主題功能,引入想應(yīng)的主題 JS 文件即可改變圖表樣式。除默認(rèn)主題樣式外,Highcharts 官方提供多款主圖,你也可以根據(jù)需要自己設(shè)計圖表主題。

Highcharts 提供的主題文件放置在 /js/themes/ 目錄下,給圖表添加灰色(Gray)主題的代碼是:

<script src="http://cdn.hcharts.cn/highcharts/themes/gray.js" type="text/javascript"></script> 

Highcharts 還有更多強大的功能。

本文關(guān)鍵詞:web,圖表,插件
回到頂部