首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在angular-meteor中使用HighCharts或ChartJS的正确方法是什么

在angular-meteor中使用HighCharts或ChartJS的正确方法是什么
EN

Stack Overflow用户
提问于 2016-02-22 08:14:18
回答 1查看 470关注 0票数 0

我正在研究一种将绘图库与angular-meteor应用程序结合使用的方法。我见过一些在AngylarJS中使用HighCharts的例子。我也看到过在Meteor中使用HighCharts的例子。我希望能够在angular-meteor应用程序中使用HighCharts或ChartJS,并将我的图表数据绑定到Angular $scope,但在某些时候,让这些图表对服务器端MongoDB中的数据更改做出反应(这就是Meteor所做的事情)。我见过一些angular-meteor应用的例子,但从来没有见过这样的应用使用任何图表。有没有人能给我举一个有反应图的角流星的例子?

EN

回答 1

Stack Overflow用户

发布于 2016-05-14 13:32:37

您可以使用此angular directive for chart.js。下面是一个显示饼图的简单示例:

从Meteor 1.3模板应用程序启动(运行meteor create myapp)。在.meteor/packages中用angular-templates替换blaze-html-templates,添加

代码语言:javascript
复制
"angular": "^1.5.5",
"angular-chart.js": "0.10.2",
"angular-meteor": "^1.3.10",`

要在package.json中“依赖”,运行meteor npm install,将client/main.js的内容替换为:

代码语言:javascript
复制
import angular from 'angular';
import 'angular-chart.js/dist/angular-chart.css';
import 'angular-chart.js';

angular.module('app', [
  'chart.js'
]).controller('MainCtrl', function ($scope){
  $scope.labels = ["a", "b", "c"];
  $scope.data = [1, 2, 3];
});

client/main.html的内容如下:

代码语言:javascript
复制
<body ng-app="app" ng-controller="MainCtrl">
  <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
 </body>

运行meteor

你应该看看这张饼图。显然,您可以使用Meteor将数据变量替换为集合中的一些数据。在这里,除了命令行工具之外,我们并没有真正使用过meteor。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35543848

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档