Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

Highcharts現已更新至最新版本7.2.0，新版本添加了新的頂級選項-說明；幾乎所有系列都增加了對多個色軸的支持；增加了高對比度光和高對比度 - 黑暗主題，與背景形成3：1對比度，并修復了一些之前存在的BUG，趕快下載試用吧~

重要推薦：

• 純JavaScript編寫的開源股票圖表控件：Highstock

• 一個基于web項目創建地圖的HTML5/JavaScript地圖組件：Highmaps

點擊下載Highcharts最新試用版

安裝

npm and Bower

Highcharts也可以通過npm和Bower打包獲得。

包括Highcharts

<script src="//code.highcharts.com/highcharts.js"></script>

如果需要對IE6、7或8的支持，則需要包括一些polyfill。

或者，從您自己的域中加載文件

在上面的示例中，JavaScript文件是從ajax.googleapis.com和code.highcharts.com加載的。下載Highcharts文件并放在您的網頁上。這是從您自己的服務器提供的Highcharts示例：

<script src="/js/highcharts.js"></script>

負載Highstock或Highmaps

Highcharts已包含在Highstock中，因此不必同時加載兩者。軟件包中包含highstock.js文件。還包含了highmaps.js文件，但與highstock.js不同，該文件不包含完整的Highcharts功能集。Highstock和Highmaps可以分別加載如下文件：

<script src="/js/highstock.js"></script>
<script src="/js/highmaps.js"></script>

但是，單獨的文件不能一起或與highcharts.js一起在同一頁面中運行。因此，如果需要在彼此相同的頁面中或帶有基本Highcharts的庫存或地圖，則可以將它們作為模塊加載：

<script src="/js/highcharts.js"></script>
<script src="/js/modules/stock.js"></script>
<script src="/js/modules/map.js"></script>

開始

現在您可以使用Highcharts，請參閱第一個圖表開始使用。

*）Highcharts版本1.x依靠excanvas.js在IE中呈現。從Highcharts 2.0（和所有Highstock版本）開始，IE VML渲染內置到庫中。

使用NPM安裝

官方的npm軟件包包含Highcharts，Highstock和Highmaps以及所有模塊。首先將Highcharts作為節點模塊安裝，然后將其另存為package.json中的依賴項：

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中，因此不必同時加載兩者。軟件包中包含highstock.js文件。還包含了highmaps.js文件，但與highstock.js不同，該文件不包含完整的Highcharts功能集。要將整個套件加載到一頁中，請將Highmaps作為模塊加載。

var Highcharts = require('highcharts/highstock');  
// Load Highmaps as a module
require('highcharts/modules/map')(Highcharts);

或者，當僅需要地圖功能而不需要庫存時。

var Highcharts = require('highcharts/highmaps');

使用Bower安裝

Bower不再是前端項目的首選依賴項管理器。在開源項目仍得到維護的同時，其創建者決定棄用該項目，并建議如何遷移到其他解決方案，即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上，請包括以下模塊：

<script src="./bower[components/highcharts/modules/exporting.js"></script>

加載Highstock或Highmaps

Highcharts已包含在Highstock中，因此不必同時加載兩者。軟件包中包含highstock.js文件。還包含了highmaps.js文件，但與highstock.js不同，該文件不包含完整的Highcharts功能集。要將整個套件加載到一頁中，請將Highmaps作為模塊加載。

<script src="./bower[components/highcharts/highstock.js"></script>
<script src="./bower[components/highcharts/modules/map.js"></script>

或者，當僅需要地圖功能而不需要庫存時。

<script src="./bower[components/highcharts/highmaps.js"></script>

=====================================================

想要購買Highcharts正版授權的朋友可以。

更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼