⑴Highcharts是一个功能强大简单易用的图表制作源码框架,是专门为制作图表而设计开发的纯Javascript类库,其丰富齐全的图表素材被数以万计的开发者和全球各行业的公司使用,深受广大用户的喜爱,是市场上最简单但最灵活的图表API;Highcharts操作简单便捷功能齐全实用,通过这款图表API可以使您的数据活跃起来,使开发人员可以轻松地在其网页中设置交互式图表,同时这款图表制作JavaScript类库内置详细齐全的安装教程和使用教程,可以为用户的安装和使用提供便利,有需要的用户赶快下载吧。
⑵为您的Web项目轻松创建交互式图表。
⑶数以万计的开发人员使用了该工具,在全球家最大的公司中,有%以上使用了该工具。Highcharts是市场上最简单但最灵活的图表API。
⑷为您的Web和移动应用程序创建股票或常规时间表图表。
⑸具有完善的导航,注释和客户端分析功能,并带有多个内置技术指标。
⑹具有向下钻取和触摸支持的交互式地图。
⑺构建交互式地图以显示销售,选举结果或与地理位置相关的任何其他信息。非常适合独立使用或与Highcharts结合在仪表板中使用!
⑻高图甘特 以前没有其他JavaScript可以胜过的地方
⑼一个强大的JavaScript库,使开发人员可以轻松地构建交互式图表,以便沿着时间轴分配,协调和显示任务,事件和资源。
⑽兼容性:兼容当今所有的浏览器,包括iPhoneIE和火狐等等;
⑾对个人用户完全免费;
⑿纯JS,无BS;
⒀支持大部分的图表类型:直线图,曲线图区域图区域曲线图柱状图饼状图散布图;
⒁跨语言:不管是PHPAsp.还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a
⒂canvas emulator for IE和Jquery类库或者MooTools类库;
⒃提示功能:鼠标移动到图表的某一点上有提示信息;
⒄放大功能:选中图表部分放大,近距离观察图表;
⒅易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
⒆时间轴:可以精确到毫秒;
⒇npm和Bower
⒈A.包括Highcharts
⒉如下所示,将JavaScript文件包含在网页的部分中。
⒊<脚本src = “ https://code.highcharts./highcharts.js ” >
⒋如果需要对IE或的支持,则需要包括一些polyfill。请参阅系统要求中的详细信息。
⒌B.或者,从您自己的域中加载文件#
⒍在上面的示例中,JavaScript文件是从ajax.googleapis.和code.highcharts.加载的。可以从highcharts.下载Highcharts文件,并将其放在您的网页上。这是从您自己的服务器提供的Highcharts的示例:
⒎<脚本src = “ /js/highcharts.js ” >
⒏C.加载Highcharts库存或Highcharts地图#
⒐Highcharts库存中已包含Highcharts,因此不必同时加载两者。软件包中包含highstock.js文件。还包含了highmaps.js文件,但与highstock.js不同,该文件不包含完整的Highcharts功能集。可以将Highcharts
⒑Stock和Highcharts地图加载为单独的文件,如下所示:
⒒但是,单独的文件不能一起或与highcharts.js一起在同一页面中运行。因此,如果需要在彼此相同的页面或带有基本Highcharts的页面中使用库存或地图,则可以将它们作为模块加载:
⒓您现在可以使用Highcharts了,请参阅第一个图表以开始使用。
⒔*Highcharts版本.x依靠excanvas.js在IE中呈现。从Highcharts .(和所有Highcharts
⒕Stock版本开始,IE VML渲染内置到库中。
⒖官方的npm软件包包含Highcharts,包括Stock,Maps和Gantt软件包,以及所有模块。首先将Highcharts作为节点模块安装,然后将其另存为package.json中的依赖项:
⒗npm install highcharts --save
⒘使用require #加载Highcharts
⒙有关加载Highcharts的其他方式(ECMAScript模块等,请参见README。
⒚加载Highcharts库存或Highcharts地图#
⒛Highcharts库存中已包含Highcharts,因此不必同时加载两者。软件包中包含highstock.js文件。还包含了highmaps.js文件,但与highstock.js不同,该文件不包含完整的Highcharts功能集。要将整个套件加载到一页中,请将Highcharts
①Maps作为模块加载。
②或者,当仅需要地图功能而不需要库存时。
③var Highcharts = require ('highcharts / highmaps' ;
④安装每日构建Highcharts的#
⑤每晚生成的版本允许在发布和测试之前访问下一个Highcharts版本。目前,可以通过Github上的highcharts-dist每晚分支机构进行访问。请注意,我们不建议在生产环境中使用每夜构建,因为它可能包含错误,并且不稳定。
⑥可以通过运行来安装每夜构建npm install --save highcharts/highcharts-dist#nightly。
⑦由于这是GitHub分支的依赖项,因此您将无法使用来更新依赖项npm update。更新需要先卸载,然后再通过运行重新安装npm uninstall
⑧highcharts && npm install --save
⑨highcharts/highcharts-dist#nightly。从每晚版本升级到Highcharts的生产版本时,也需要卸载。
⑩使用Bower #安装
ⅠBower不再是前端项目的首选依赖项管理器。在开源项目仍得到维护的同时,其创建者决定弃用该项目,并建议如何迁移到其他解决方案,即Yarn和webpack。
ⅡBower软件包包含Highcharts,Highcharts
ⅢStock和Highcharts地图。首先从Bower加载Highcharts:
Ⅳbower install highcharts
Ⅴ负载Highcharts #
Ⅵ加载额外的模块#
Ⅶ要将其他功能加载到Highcharts上,请包括以下模块:
Ⅷ<脚本src = “ https://www.xiazaiba./html/bower_ponents/highcharts/modules/exporting.js ” >
Ⅸ加载Highcharts库存或Highcharts地图#
ⅩHighcharts库存中已包含Highcharts,因此不必同时加载两者。软件包中包含highstock.js文件。还包含了highmaps.js文件,但与highstock.js不同,该文件不包含完整的Highcharts功能集。要将整个套件加载到一页中,请将Highcharts
㈠Maps作为模块加载。
㈡或者,当仅需要地图功能而不需要库存时。
㈢<脚本src = “ https://www.xiazaiba./html/bower_ponents/highcharts/highmaps.js ” >
㈣第一个图表#网页中包含Highcharts之后,您就可以创建第一个图表了。我们将从创建一个简单的条形图开始。在您的网页中添加一个div。给它一个id并设置一个特定的宽度和高度,这将是图表的宽度和高度。<
㈤div id = “ container ” style =“宽度:100 %;高度:400 px ; ” >
㈥通过在网页中的任何位置添加包含以下代码的JavaScript标签来初始化图表 。#中的div在构造函数中引用。
㈦如果要插入股票图表,则有一个称为的单独的构造函数方法Highcharts.stockChart。在这些图表中,数据通常以单独的JavaScript数组提供,可以从单独的JavaScript文件中获取,也可以通过对服务器的XHR调用获取。
㈧现在,您应该在网页上看到以下图表:
㈨Highcharts Basic v..(-- 暴露重写HTML和提供的样品允许列表。Highcharts.AST
㈩图前可访问性描述的自动计算标题级别。
为添加了成功回调exportChartLocal,请参见#。
Highcharts Basic v..(--
通过在插入DOM之前通过允许列表过滤所有HTML配置字符串和抽象语法树来提高安全性。
添加了对D图表中的面积系列的支持。
添加了新功能chart.zoomBySingleTouch,以为触摸设备提供可选的类似鼠标的选择缩放。参见#。
添加了对图例标题#(的可访问性支持,并为辅助技术(#提供了更直观的图例项标签。
Highcharts Basic v..(-- Bug修复
Highcharts Basic v..(-- 内部重组的源文件结构和命名。
defer作为动画参数添加,请参见#。这允许对系列动画,标签等进行细粒度的延迟。
在模块中为数据表添加了切换功能。参见#。export-data
添加了对在图表配置中配置超声处理选项的支持,以及对禁用单个系列,配置主体积和反极性映射的支持。请注意,图表配置选项仍被认为是实验性的,可能会更改。
添加了新选项time.moment,允许在窗口上下文中不使用库的情况下使用该库。moment.js