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

點(diǎn)擊下載Highcharts最新試用版

安裝

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)品最新資訊▼▼▼