轉(zhuǎn)帖|使用教程|編輯:吳園園|2019-10-16 13:46:16.520|閱讀 342 次
概述:本文將為您介紹如何安裝Highcharts。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
Highcharts是一款純JavaScript編寫(xiě)的圖表庫(kù),為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線(xiàn)、曲線(xiàn)、區(qū)域、區(qū)域曲線(xiàn)圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測(cè)量圖、區(qū)域排列圖、區(qū)域曲線(xiàn)排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類(lèi)型。
Highcharts現(xiàn)已更新至最新版本7.2.0,新版本添加了新的頂級(jí)選項(xiàng)-說(shuō)明;幾乎所有系列都增加了對(duì)多個(gè)色軸的支持;增加了高對(duì)比度光和高對(duì)比度 - 黑暗主題,與背景形成3:1對(duì)比度,并修復(fù)了一些之前存在的BUG,趕快下載試用吧~
重要推薦:
純JavaScript編寫(xiě)的開(kāi)源股票圖表控件:Highstock
一個(gè)基于web項(xiàng)目創(chuàng)建地圖的HTML5/JavaScript地圖組件:Highmaps
安裝
npm and Bower
Highcharts也可以通過(guò)npm和Bower打包獲得。
包括Highcharts
<script src="//code.highcharts.com/highcharts.js"></script>
如果需要對(duì)IE6、7或8的支持,則需要包括一些polyfill。
在上面的示例中,JavaScript文件是從ajax.googleapis.com和code.highcharts.com加載的。下載Highcharts文件并放在您的網(wǎng)頁(yè)上。這是從您自己的服務(wù)器提供的Highcharts示例:
<script src="/js/highcharts.js"></script>
負(fù)載Highstock或Highmaps
Highcharts已包含在Highstock中,因此不必同時(shí)加載兩者。軟件包中包含highstock.js文件。還包含了highmaps.js文件,但與highstock.js不同,該文件不包含完整的Highcharts功能集。Highstock和Highmaps可以分別加載如下文件:
<script src="/js/highstock.js"></script> <script src="/js/highmaps.js"></script>
但是,單獨(dú)的文件不能一起或與highcharts.js一起在同一頁(yè)面中運(yùn)行。因此,如果需要在彼此相同的頁(yè)面中或帶有基本Highcharts的庫(kù)存或地圖,則可以將它們作為模塊加載:
<script src="/js/highcharts.js"></script> <script src="/js/modules/stock.js"></script> <script src="/js/modules/map.js"></script>
開(kāi)始
現(xiàn)在您可以使用Highcharts,請(qǐng)參閱第一個(gè)圖表開(kāi)始使用。
*)Highcharts版本1.x依靠excanvas.js在IE中呈現(xiàn)。從Highcharts 2.0(和所有Highstock版本)開(kāi)始,IE VML渲染內(nèi)置到庫(kù)中。
使用NPM安裝
官方的npm軟件包包含Highcharts,Highstock和Highmaps以及所有模塊。首先將Highcharts作為節(jié)點(diǎn)模塊安裝,然后將其另存為package.json中的依賴(lài)項(xiàng):
npm install highcharts --save
使用需求加載Highcharts
var Highcharts = require('highcharts'); // Load module after Highcharts is loaded require('highcharts/modules/exporting')(Highcharts); // Create the chart Highcharts.chart('container', { /*Highcharts options*/ });
加載Highstock或Highmaps
Highcharts已包含在Highstock中,因此不必同時(shí)加載兩者。軟件包中包含highstock.js文件。還包含了highmaps.js文件,但與highstock.js不同,該文件不包含完整的Highcharts功能集。要將整個(gè)套件加載到一頁(yè)中,請(qǐng)將Highmaps作為模塊加載。
var Highcharts = require('highcharts/highstock'); // Load Highmaps as a module require('highcharts/modules/map')(Highcharts);
或者,當(dāng)僅需要地圖功能而不需要庫(kù)存時(shí)。
var Highcharts = require('highcharts/highmaps');
使用Bower安裝
Bower不再是前端項(xiàng)目的首選依賴(lài)項(xiàng)管理器。在開(kāi)源項(xiàng)目仍得到維護(hù)的同時(shí),其創(chuàng)建者決定棄用該項(xiàng)目,并建議如何遷移到其他解決方案,即Yarn和webpack。
Bower軟件包包含Highcharts,Highstock和Highmap。首先從Bower加載Highcharts:
bower install highcharts
加載Highcharts
<script src="./bower[components/highcharts/highcharts.js"></script> <script> // Create the chart Highcharts.Chart('container', { /*Highcharts options*/ }); </script>
加載其他模塊
要將其他功能加載到Highcharts上,請(qǐng)包括以下模塊:
<script src="./bower[components/highcharts/modules/exporting.js"></script>
加載Highstock或Highmaps
Highcharts已包含在Highstock中,因此不必同時(shí)加載兩者。軟件包中包含highstock.js文件。還包含了highmaps.js文件,但與highstock.js不同,該文件不包含完整的Highcharts功能集。要將整個(gè)套件加載到一頁(yè)中,請(qǐng)將Highmaps作為模塊加載。
<script src="./bower[components/highcharts/highstock.js"></script> <script src="./bower[components/highcharts/modules/map.js"></script>
或者,當(dāng)僅需要地圖功能而不需要庫(kù)存時(shí)。
<script src="./bower[components/highcharts/highmaps.js"></script>
=====================================================
想要購(gòu)買(mǎi)Highcharts正版授權(quán)的朋友可以。
更多精彩內(nèi)容,敬請(qǐng)關(guān)注下方的微信公眾號(hào),及時(shí)獲取產(chǎn)品最新資訊▼▼▼
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: