Question

我希望借助chart.js显示两个不同值的不同图表在同一个控制器，但我无法做到。因为我不知道该怎么做。任何人都可以请你帮忙，谢谢你。

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

如何使用角度js中的Chart.js在同一个控制器中显示多个图表

1 个答案: