Question

我一直在研究能够与Angular.JS指令很好地融合的图表解决方案。我遇到了一些但真的很困惑。有没有人对如何创建与Angular.JS模块集成的交互式图表有任何建议？

Answer 1

angular-charts是我创建的用于创建带有角度和D3的图表的库。

它封装了可以在一个angular指令中使用D3创建的基本图表。它还提供诸如

之类的功能

点击图表更改;
自动工具提示;
自动调整容器;
图例;
简单数据格式：仅定义您在x上的内容以及您在y上需要的内容;

有angular-charts demo可用。

Answer 2

我已经看到了一些使用Highcharts的好的AngularJS图表解决方案。 GitHub上的highcharts-ng指令使AngularJS集成更容易，而JSFiddle上的some examples可以让您快速了解可能的内容。

您在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可免费用于非商业用途。如果您正在寻找营利/商业方案中的图表选项，您需要购买该产品或寻找其他地方。

Answer 3

ZingChart library有AngularJS directive内部构建。功能包括：

完全访问整个ZingChart库（所有图表，地图和功能）
利用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>

有full demo with code examples可用。

Answer 4

你试过D3.js吗？这是一个很好的example。

Answer 5

我为xCharts创建了一个角度指令，这是一个很好的js图表库http://tenxer.github.io/xcharts/。您可以使用bower安装它，非常简单： https://github.com/radu-cigmaian/ng-xCharts

Highcharts也是一种解决方案，但它不能免费用于商业用途。

Answer 6

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

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

查看examples以确信。

Answer 7

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

用angularjs创建图表

7 个答案: