Highcharts–ng
高校的AngularJS指令
HighCharts的简单AngularJS指令。
例子
请参阅./example/charts/general-example.html中的示例(https://*rawg*it.c*om/pablojim/highcharts-ngcharts-ng/master/example/example/charts/charts/general-example.html)
还:
- 基本:http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/master/jsfiddles/basic/
- 极性图表:http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/master/jsfiddles/polar/
- 多轴:http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/master/jsfiddles/multi_axis/
- 调整大小到屏幕尺寸:http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/master/jsfiddles/resizing/
- 禁用更改检测检测http://j*s*fidd*le.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/master/jsfiddles/disabled_change_detection/
- 重新创建图表http://*js*f*iddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/master/jsfiddles/recreating/
执照
该库可根据MIT许可证获得。但是,它是Highcharts的包装纸。 HighCharts本身有自己的许可证。因此,请确保也遵循其许可证(https://*githu**b.com/highcharts/highcharts/blob/master/license.txt)
注意:您需要将Highcharts库包括在内。它不包含在此存储库中。
当前版本
需要HighCharts/HighStock> = 5.0.0
仅支持AngularJ> = 1.5.8
配置格式与HighCharts-Ng 0.x.0不兼容
设置:
使用NPM安装:
npm install highcharts-ng
或与鲍尔:
bower install highcharts-ng --save
使用NPM添加Highcharts作为项目依赖性
npm install highcharts
或与鲍尔:
bower install highcharts --save
添加对HighCharts/HighStocks的参考:
< script src =\" http://code.high*cha*r*ts.com/stock/highstock.src.js \" > </ script >
或者
< script src =\" http://code.highch*art**s.com/highcharts.src.js \" > </ script >
将Highcharts添加到您的Angular App配置:
var myapp = angular . module ( \'myapp\' , [ \"highcharts-ng\" ] ) ;
(可选)如果您在调整图表到屏幕尺寸的大小上有一些问题,请包括HighCharts-NG CSS文件
< link href =\" dist/highcharts-ng.css \" rel =\" stylesheet \" >
制作图表!
< highchart id =\" chart1 \" config =\" chartConfig \" > </ highchart >
chartConfig对象应与普通的Highcharts配置相同。在HighCharts中工作的任何选项也应在这里工作。要使用HighStock图表,您只需要在chartConfig中添加chartType: \'stock\'即可。
强烈建议给所有系列和轴一个独特的ID。
图表配置上的所有属性都是可选的。如果您不需要最佳的功能就可以完全遗漏 – Highcharts通常会默认为明智的东西。观察每个属性的Angularjs更改。
构建后,可以使用chartConfig.getChartObj()访问HighCharts Chart对象。这是访问该指令当前未管理的所有Highcharts API的简单方法。请参阅JSFIDDLE基本示例,以查看如何调用HighCharts的打印功能。
有时,创建整个新的Highcharts图表而不是更新上一张图是有意义的。为此,您需要将整个新图表配置对象传递到组件,而不是更新以前的配置对象。 (请参阅上面的示例部分)
如果您知道图表数据不会更改,则可以禁用更改估算以提高性能。这可以使用属性disable-change-detection=\"true\" 。但是,这实际上只会通过庞大的数据集影响图表。 (请参阅上面的示例部分)
特征:
- 添加和删除系列
- 设置/更新图表选项
- 更新图表标题
- 调整屏幕尺寸的变化。
- 提供自定义更改式函数或表达式 – 为了速度,可以提供自定义更改的口气功能,以保存肮脏的检查完整图表配置。
以前不支持的功能:
- 2与图表Xaxis结合。 (使用ChartConfig.getChartObj()获取轴值)
- 通过配置(使用ChartConfig.getChartObj()获取轴值)的加载状态控制加载状态。
- 在动态更新的系列上使用添加和删除点
警告:
- 由于许多平等检查,指令可能会使用大数据集慢慢 – 尝试使用更改搜索
- 整个图表/系列通常是重新绘制的,而数据的简单更新就足够了
- 如果您不为系列分配ID-将添加增量ID。这可能意味着额外的重复。
- 需要更多测试!
常问问题:
- 与以前的0.0.x版本有什么不同?
这个版本要简单得多,应该更稳定。但是,某些功能仍将实现
- 如何访问图表对象?
您可以使用config.getChartObj 。 95%的时间您不需要这个,而应该更改ChartConfig。
小心 – 如果您用图表对象手动更改图表中的图表对象,则图表中的图表可能最终不同步。
- 您为什么不使用标准的Highcharts格式?
自1.0.0以来,支持Vanilla Highcharts对象!
版本
版本1.2.1
修复#592
版本1.2.0
由于许可问题而删除对Highcharts的明确依赖性,还允许用户在Highcharts和HighStocks之间进行选择。
- 添加了对$ onchanges的支持,添加了新的绑定到禁用更改检测#622
感谢@ngehlert和其他人的贡献。
版本1.1.0
现在对HighCharts.js有明确的依赖性。
- 修复调整#550
- 添加的模块加载程序支持https://gith*ub.*co*m/pablojim/highcharts-ng/commit/508df111886c4be8b26e8b26e82cb6d3e2303f17efed8感谢@houssemba和其他人的贡献。
版本1.0.1
- 修复多个Yaxes#201
版本1.0.0
- 仅支持Highchart/HighStock> = 5.0.0
- 仅支持angularjs> = 1.5.8(请参阅https://github.com/toddmotto/angular-compents,有关较低版本)
- 移至AngularJS组件
- 现在支持Vanilla Highcharts配置
- 支持自定义更改检测功能
- 应该更加稳定,较少的错误
- 2轴绑定不再支撑
- 加载属性不再支持
版本0.0.13
- 次要错误文件
版本0.0.12
- 在可能的情况下使用附加点
- 分开的懒货人 – 谢谢@graingert
- 很多更新和修复 – 谢谢@graingert
版本0.0.11
- 缺少Yaxis的控制台错误的错误修复
版本0.0.10
- 错误修复0.0.9-深度扩展问题
版本0.0.9
- 懒惰加载 – 谢谢@fdim
- 更好的导航器支持 – 谢谢 @asethi77
- 很多错误修复 – 感谢所有贡献者
版本0.0.8
- 添加了config.gethighcharts-谢谢@valentinh
- 很多错误修复 – 感谢所有贡献者
- 现在支持Highmaps-请参阅:http://rawgit.com/pablojim/highcharts-ng/master/example/maps/maps/maps/example.html
版本0.0.7
- 更好地支持大型数据系列 – 谢谢 @f1ghtingfalcons
- 很多错误修复 – 感谢所有贡献者
版本0.0.6
- 没有添加数据逻辑 – 谢谢@eranbetzalel
- 添加了回流活动,谢谢@pajooh
- 添加了尺寸设置的示例
- 次要错误修复
版本0.0.5
- 现在看大小属性
- 在轴周围进行更健壮的检查
版本0.0.4
- 修复以最小化文件
版本0.0.3
- 迁移到Grunt,Bower和NPM
- 错误修复
- 一些加速
版本0.0.2
- 删除了jQuery依赖性
- 允许用于NULL配置选项
版本0.0.1(与当前版本不兼容)
< highchart id =\" chart1 \" series =\" chart.series \" title =\" chart.title \" options =\" chart.options \" > </ highchart >
请参阅此处的示例:http://jsfiddle.net/pablojim/46rhz/
