彩票走势图

JavaScript图表库Highcharts入门教程(二):安装

转帖|使用教程|编辑:吴园园|2019-10-16 13:46:16.520|阅读 292 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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正版授权的朋友可以。

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

开源图表库Highcharts入门教程(二):安装


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP