用angularjs创建图表

Question

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

Answer 1

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

它封装了可以在一个角度指令中使用D3创建的基本图表.它还提供诸如此类功能

1. 点击图表更改;
2. 自动工具提示;
3. 自动调整容器;
4. 传说;
5. 简单的数据格式:仅定义x上的内容以及y上需要的内容;

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

Answer 2

我见过一些使用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可免费获得,用于非商业用途.如果您正在寻找营利/商业方案中的图表选项,您需要购买该产品或寻找其他地方.

Answer 3

该ZingChart库有一个AngularJS指令,这是在内部构建.功能包括:

• 完全访问整个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>
  

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

Answer 4

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

Answer 5

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

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