what is the proper way to use HighCharts or ChartJS with angular-meteor

问题

I was researching a way if using a charting library with angular-meteor application. I have seen some examples of using HighCharts with AngylarJS. I have also seen examples of using HighCharts with Meteor. I would love to be able to use either HighCharts or ChartJS within angular-meteor application, and to have my charts data bound to Angular $scope, but, at the some time, have those charts react to the data changes in the server-side MongoDB (which us what Meteor does). I have seen some examples of angular-meteor app, but never seen such an app use any charts. Can anyone point me to a working angular-meteor example, which has a reactive chart?

回答1:

You can use this angular directive for chart.js. Here is a simple example showing a pie chart:

Starting from a Meteor 1.3 template application (run meteor create myapp). Replace blaze-html-templates with angular-templates in .meteor/packages, add

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

to "dependencies" in package.json, run meteor npm install, replace the content of client/main.js with this:

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];
});

and the content of client/main.html with this:

<body ng-app="app" ng-controller="MainCtrl">
  <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
 </body>

run meteor.

You should see the pie chart. Obviously you can replace the data variable with some data from a collection etc. using Meteor. Here we haven't really used meteor except of the command line tool.

来源：https://stackoverflow.com/questions/35543848/what-is-the-proper-way-to-use-highcharts-or-chartjs-with-angular-meteor

标签

angular-meteor