使用 angularjs 创建图表

Posted 2023-02-16

【中文标题】使用 angularjs 创建图表

【英文标题】：creating charts with angularjs [closed]

【发布时间】：2013-10-25 11:39:10

【问题描述】：

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

【问题讨论】：

鉴于以下帖子，接受其中一个是否有意义，或者您仍在寻找答案？

【参考方案1】：

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

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

之类的功能

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

有一个angular-charts demo 可用。

【讨论】：

看起来不错，但我想我想念那里的东西。我不能让它加载。在安装指南中写着“依赖项：Angular 和 d3”和“使用凉亭安装”——这是什么意思？我必须包括 D3 吗？什么是凉亭？

我收到此错误：[$injector:unpr] 未知提供者：angularChartsProvider

您不需要将 angularCharts 注入到您的控制器中。只需使用 $scope 即可为其提供指令在 html 中所需的数据。

是否有 2 个版本的角度图表 - 我看到一个使用 d3，另一个使用 chart.js

不幸的是，角度图表社区已经死了，问题没有得到解决。我在业务应用程序中依赖它，但可能不得不拔掉插头并转移到角度图表而不是 jtblin.github.io/angular-chart.js

【参考方案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 可根据知识共享许可免费用于非商业用途。如果您正在寻找营利性/商业场景中的图表选项，则需要购买该产品或寻找其他地方。

【讨论】：

highcharts-ng 的作者在这里。查看综合演示：pablojim.github.io/highcharts-ng/examples/example.html

【参考方案3】：

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

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

来自开发团队的支持

...
$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 可用。

【讨论】：

好像你隶属于 ZingCharts。提前说明是合适的。

在发帖时，这是我有过的经验并且觉得推荐的指令。无论如何，感谢您对本主题的有意义的贡献！

【参考方案4】：

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

【讨论】：

这得到了投票？它是普通的 JS。有包装器，但这可能是最好的起点 - 在官方 ng-newsletter ...ng-newsletter.com/posts/d3-on-angular.html

【参考方案5】：

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

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

【参考方案6】：

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

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

查看examples 以获得说服力。

【讨论】：

怕链接坏了

【参考方案7】：

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