用angularjs创build图表

我也一直在寻找能够很好的融合Angular.JS指令的图表解决scheme。 我遇到了一些，但非常困惑。 有没有人有任何build议如何创build与Angular.JS模块集成的交互式图表？

Answer 1

angular度图是我为创build带有angular度和D3的图表而编写的库。

它封装了可以在一个angular度指令中使用D3创build的基本图表。 另外它提供的function如

1. 一键图表变化;
2. 自动工具提示;
3. 自动调整容器;
4. 传说;
5. 简单的数据格式：只定义你在x和你需要什么y;

有一个可用的angular度图演示 。

Answer 2

我见过一些很好的使用Highcharts的 AngularJS制图解决scheme。 在GitHub上有一个关于使AngularJS集成更容易的highcharts-ng指令， JSFiddle上的一些 例子让你快速尝试一下可能的东西。

你这样设置JS方面的图表：

$scope.chart = { options: { chart: { type: 'bar' } }, series: [{ data: [10, 15, 12, 8, 7] }], title: { text: 'Hello' }, loading: false } 

然后在HTML中引用它，如下所示：

 <highchart id="chart1" config="chart"></highchart> 

使用/许可警告：Highcharts可以在Creative Commons许可下免费使用，用于非商业用途。 如果您正在寻找盈利/商业场景中的图表选项，则需要购买产品或查看其他地方。

Answer 3

ZingChart库有一个内部构build的AngularJS指令 。 function包括：

• 完全访问整个ZingChart库（所有图表，地图和function）
• 利用Angular的双向数据绑定，使数据和图表元素易于更新

• 来自开发团队的支持

   ... $scope.myJson = { type : 'line', series : [ { values : [54,23,34,23,43] },{ values : [10,15,16,20,40] } ] }; ... <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart> 

有一个完整的示例可用的代码示例 。

Answer 4

你有没有试过D3.js？ 这是一个很好的例子 。

Answer 5

我为xCharts创build了一个angular度指令，它是一个不错的js图表库http://tenxer.github.io/xcharts/ 。 你可以使用鲍尔安装它，很容易： https ： //github.com/radu-cigmaian/ng-xCharts

Highcharts也是一个解决scheme，但它不是免费的商业用途。

Answer 6

在这里收集更多有用的资源：

如前所述，D3.js绝对是图表的最佳可视化库。 为了在AngularJS中使用它，我开发了angular度图 。 这是一个易于使用的指令，将D3.js与AngularJS 2-Way-DataBinding连接起来。 这样，只要更改configuration选项，图表就会自动更新，同时图表会保存其状态（缩放级别…），以便在AngularJS世界中可用。

看看这些例子以确信。

Answer 7

AngularJS制图插件以及FusionCharts库，只需一个指令即可将交互式JavaScript图表和图表添加到您的Web /移动应用程序中。 链接： http : //www.fusioncharts.com/angularjs-charts/#/demos/ex1