角度jsでChart.jsを使用して複数のチャートを同じコントローラに表示する方法

Question

同じコントローラ内にchart.js の助けを借りて異なる値の2つのチャートを表示したいですが、できません。どのように行うのか知らないので。 誰も私のやり方を助けてくれますか、ありがとうございます。

Htmlの

<div id="chart_block"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title">Bar chart</h4> 
       </div> 
       <div class="panel-body"> 
        <canvas id="bar" class="chart chart-bar"chart-data="data" chart-labels="labels" 
          chart-series="series" barChart></canvas> 
       </div> 
      </div> 
     </div> 

     <div class="col-md-6"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title">Line chart</h4> 
       </div> 
       <div class="panel-body"> 
        <canvas id="line" class="chart chart-line" chart-data="data" 
          chart-labels="labels" chart-series="series" chart-options="options" 
          chart-dataset-override="datasetOverride" chart-click="onClick"></canvas> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

コントローラ

(function() { 
"use:strict"; 
angular.module("myApp").controller("chartsCtrl", ["$scope", chartsCtrl]); 

function chartsCtrl($scope) { 
//For First Chart 
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
    $scope.series = ['Series A', 'Series B']; 
    $scope.data = [ 
     [65, 59, 80, 81, 56, 55, 40], 
     [28, 48, 40, 19, 86, 27, 90] 
    ]; 
} 

//For Second Chart 
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
    $scope.series = ['Series A', 'Series B']; 
    $scope.data = [ 
    [65, 59, 80, 81, 56, 55, 40], 
    [28, 48, 40, 19, 86, 27, 90] 
    ]; 
    $scope.onClick = function (points, evt) { 
    console.log(points, evt); 
    }; 
    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }]; 
    $scope.options = { 
    scales: { 
     yAxes: [ 
     { 
      id: 'y-axis-1', 
      type: 'linear', 
      display: true, 
      position: 'left' 
     }, 
     { 
      id: 'y-axis-2', 
      type: 'linear', 
      display: true, 
      position: 'right' 
     } 
     ] 
    } 
    }; 

}）（）;

Answer 1

異なる変数を使用します。

HTMLコード：

<canvas id="bar" class="chart chart-bar" chart-data="data1" chart-labels="labels1" chart-series="series1" barChart></canvas> 

<canvas id="line" class="chart chart-line" chart-data="data2" chart-labels="labels2" chart-series="series2" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas> 

コントローラコード：

$scope.labels1 = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
$scope.series1 = ['Series A', 'Series B']; 
$scope.data1 = [ 
[65, 59, 80, 81, 56, 55, 40], 
[28, 48, 40, 19, 86, 27, 90]]; 


$scope.labels2 = ["January", "February", "March", "April", "May", "June", "July"]; 
$scope.series2 = ['Series A', 'Series B']; 
$scope.data2 = [ 
[65, 59, 80, 81, 56, 55, 40], 
[28, 48, 40, 19, 86, 27, 90]];