使用角度流星使用HighCharts或ChartJS的正确方法是什么

时间:2016-02-22 00:14:18

标签: angular-meteor

如果使用带有角度流星应用程序的图表库,我正在研究一种方法。我已经看到了一些使用HighCharts和AngylarJS的例子。我也看过使用HighCharts和Meteor的例子。我希望能够在角度流星应用程序中使用HighCharts或ChartJS,并将我的图表数据绑定到Angular $ scope,但是,在某些时候,让这些图表对服务器端的数据更改做出反应MongoDB(我们是Meteor所做的)。我见过角度流星应用程序的一些例子,但从未见过这样的应用程序使用任何图表。任何人都可以指向一个有效的角度流星示例,它有一个反应图表吗?

1 个答案:

答案 0 :(得分:0)

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

从Meteor 1.3模板应用程序开始(运行meteor create myapp)。 将blaze-html-templates替换为angular-templates中的.meteor/packages, 添加

"angular": "^1.5.5",
"angular-chart.js": "0.10.2",
"angular-meteor": "^1.3.10",`

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

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的内容:

<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。