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对象！

修复＃592

由于许可问题而删除对Highcharts的明确依赖性，还允许用户在Highcharts和HighStocks之间进行选择。

• 添加了对$ onchanges的支持，添加了新的绑定到禁用更改检测＃622

感谢@ngehlert和其他人的贡献。

现在对HighCharts.js有明确的依赖性。

• 修复调整＃550
• 添加的模块加载程序支持https://gith*ub.*co*m/pablojim/highcharts-ng/commit/508df111886c4be8b26e8b26e82cb6d3e2303f17efed8感谢@houssemba和其他人的贡献。

• 修复多个Yaxes＃201

• 仅支持Highchart/HighStock> = 5.0.0
• 仅支持angularjs> = 1.5.8（请参阅https：//github.com/toddmotto/angular-compents，有关较低版本）
• 移至AngularJS组件
• 现在支持Vanilla Highcharts配置
• 支持自定义更改检测功能
• 应该更加稳定，较少的错误
• 2轴绑定不再支撑
• 加载属性不再支持

• 次要错误文件

• 在可能的情况下使用附加点
• 分开的懒货人 - 谢谢@graingert
• 很多更新和修复 - 谢谢@graingert

• 缺少Yaxis的控制台错误的错误修复

• 错误修复0.0.9-深度扩展问题

• 懒惰加载 - 谢谢@fdim
• 更好的导航器支持 - 谢谢 @asethi77
• 很多错误修复 - 感谢所有贡献者

• 添加了config.gethighcharts-谢谢@valentinh
• 很多错误修复 - 感谢所有贡献者
• 现在支持Highmaps-请参阅：http：//rawgit.com/pablojim/highcharts-ng/master/example/maps/maps/maps/example.html

• 更好地支持大型数据系列 - 谢谢 @f1ghtingfalcons
• 很多错误修复 - 感谢所有贡献者

• 没有添加数据逻辑 - 谢谢@eranbetzalel
• 添加了回流活动，谢谢@pajooh
• 添加了尺寸设置的示例
• 次要错误修复

• 现在看大小属性
• 在轴周围进行更健壮的检查

• 修复以最小化文件

• 迁移到Grunt，Bower和NPM
• 错误修复
• 一些加速

• 删除了jQuery依赖性
• 允许用于NULL配置选项

 < highchart id =" chart1 " series =" chart.series " title =" chart.title " options =" chart.options " >  highchart >

请参阅此处的示例：http：//jsfiddle.net/pablojim/46rhz/