如何在 angularjs 中使用 canvasjs 图表？ angularjs 页中有多个图表？

Question

我使用 angular.js 已经 6 个月了，现在我想在 angular.js 中使用图表，我相信 CanvasJS is the best chart, its light weight and easy to render, anyone please guide me how to write directives of CanvasJS 在 angular.js

Answer 1

穆罕默德

检查此 example。

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

"how to write directives of CanvasJS in angular.js"

我不建议您为此创建指令。原因是，随着指令链接和您的 $scope 值发生变化，AngularJS 会根据需要快速更新 DOM（文档对象模型）。同时，AngularJS 还需要提醒 Controllers $scope 的变化。所有这一切的时机有点难以理解。因此，如果您有多个图表，这可能是一个代价高昂的过程。

我建议您为图表创建一个单独的 factory method。 在工厂和控制器之前加载 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);

}]);

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

关于使用 ChartJS 的选择： 我在处理图表时不得不选择一次，我选择了 D3 instead because of its vast and broad variety of charts 它是 免费的 使用并包含大量示例的所有基本图表 ;)

如何在 angularjs 中使用 canvasjs 图表？ angularjs 页中有多个图表？

how to use canvasjs charts in angularjs? multiple charts in angularjs page?

javascript

angularjs

html

canvasjs