44

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

4

7 回答 7

52

angular-charts是我为使用 angular 和D3创建图表而编写的库。

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

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

有一个角度图表演示可用。

于 2013-12-04T06:25:04.260 回答
16

我见过一些使用Highcharts的不错的 AngularJS 图表解决方案。GitHub 上有一个highcharts-ng指令可以使 AngularJS 集成更容易，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 可根据知识共享许可免费用于非商业用途。如果您正在寻找营利性/商业场景中的图表选项，则需要购买该产品或寻找其他地方。

于 2013-10-17T06:17:56.790 回答
16

ZingChart库有一个内部构建的AngularJS 指令。特点包括：

  • 完全访问整个 ZingChart 库（所有图表、地图和功能）
  • 利用 Angular 的 2-way 数据绑定，使数据和图表元素易于更新

  • 开发团队的支持 

    ...
$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>

有一个包含代码示例的完整演示。

于 2015-10-15T19:19:55.823 回答
6

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

于 2013-10-17T05:48:21.960 回答
5

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

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

于 2014-03-22T10:02:43.773 回答
3

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

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

查看示例以获得说服力。

于 2015-01-18T19:41:53.830 回答
2

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

于 2016-02-03T10:21:45.730 回答