JavaScript图表库Highcharts入门教程（二）：安装

本文将为您介绍如何安装Highcharts。

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="https://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 loadedrequire('highcharts/modules/exporting')(Highcharts);  // Create the chartHighcharts.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 modulerequire('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 chartHighcharts.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正版授权的朋友可以咨询官方客服。

更多精彩内容，敬请关注下方的微信公众号，及时获取产品最新资讯▼▼▼

标签：

来源：慧都