如何在angularjs中使用canvasjs图表？英格拉杰网页上的多张图表？

Question

我使用angular.js已经6个月了，现在我想在angular.js中使用图表，我相信CanvasJS是最好的图表，它的重量轻，易于渲染，请指导我如何用angular.js编写CanvasJS指令。

Answer 1

穆罕默德，

看看这个示例。

​

// data related to AngularJS
var m = {
  "India": "2",
  "Australia": "3"
};

function MyCtrl($scope) {
  $scope.items = m;
}

// data related to CanvasJS Charts
window.onload = function() {

  var dps = [{
    x: 1,
    y: 10
  }]; //dataPoints. 

  var chart = new CanvasJS.Chart("chartContainer-Australia", {
    title: {
      text: "Live Data"
    },
    axisX: {
      title: "Axis X Title"
    },
    axisY: {
      title: "Units"
    },
    data: [{
      type: "line",
      dataPoints: dps
    }]
  });

  var chart2 = new CanvasJS.Chart("chartContainer-India", {
    title: {
      text: "Live Data"
    },
    axisX: {
      title: "Axis X Title"
    },
    axisY: {
      title: "Units"
    },
    data: [{
      type: "line",
      dataPoints: dps
    }]
  });

  chart.render();
  chart2.render();
  var xVal = dps.length - 1;
  var yVal = 15;
  var updateInterval = 1000;

  var updateChart = function() {
    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
    dps.push({
      x: xVal,
      y: yVal
    });
    xVal--;
    chart.render();
    chart2.render();

  };
  setInterval(function() {
    updateChart()
  }, updateInterval);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

<h3>Match Summary:</h3>
<div ng-app ng-controller="MyCtrl">
  <div ng-repeat="(country,goals) in items">
    <div id="chartContainer-{{country}}" style="height: 200px; width: 100%;"></div>
    <h2>{{country}}: {{goals}} </h2>
  </div>
</div>

​

Answer 2

“如何用CanvasJS编写angular.js指令”

我不建议你为此制定指令。原因是，随着指令的链接和$scope值的变化，AngularJS可以根据需要快速更新DOM (Document )。同时，AngularJS还需要提醒控制器注意$scope中的变化。这一切发生的时间有点难理解。因此，如果您有多个图表，这可能是一个昂贵的过程。

我建议您为图表创建一个单独的工厂法。在工厂和控制器之前加载ChartJS库。

module.factory('chartService', function(){

    var chart = {};

    chart.bar = function(element, data) {
        // code for bar chart
    };  

    chart.line = function(element, data) {
        // code for line chart
    };  

    chart.pie = function(element, data) {
        // code for pie chart
    };
    // more charts...

    return chart;

});

你可以像这样在控制器上使用它们。

module.controller('chartController', ['chartService', function(chartService){

    var data = [];  // get data from somewhere....
    // element is the DOM element where you want to render chart
    chartService.line(element, data);

}]);

海事组织并没有从指令中拿走任何东西，这样它就变得更干净、更通用、更可重用，而且我们也满足了关切的分离。您可以通过此方法轻松切换到任何图表库，而无需更改控制器和视图中的任何内容或很少更改。

关于选择使用：ChartJS:当我处理图表时，必须选择一次，而选择D3是因为它的各种各样的图表，它可以自由使用，可以用大量的例子覆盖所有的基本图表;)