javascript - 减少AngularJS中图表的Canvas html代码

Question

为了显示图表，我使用模块angular-chart.js。Angular 应用程序需要两种图表，条形图和折线图。目前，图表是在 HTML 视图中单独定义的。

下面你可以看到当前的代码：

<canvas id="bar"
        height="120"
        ng-show="showBarChart"
        class="chart chart-bar" 
        chart-data="dataChart"
        chart-labels="labels"
        chart-series="series">
</canvas>

<canvas id="line cvs-size"
        height="120"
        ng-show="showLineChart" 
        class="chart chart-line" 
        chart-data="dataChart"
        chart-labels="labels"
        chart-series="series">
</canvas>

下面的代码是必需的目标：

<canvas id="{{ chartType }}"
        height="120"
        ng-show="showChart"
        class="chart chart-{{ chartType }}" 
        chart-data="dataChart"
        chart-labels="labels">
</canvas>

用户可以选择查询。单击该按钮将返回查询的相应图表。

CrudService.getData(from, to).$promise.then(
    function (resp) {
      $scope.showChart = true;
      $scope.chartType = 'bar';
      angular.forEach(resp, function (item) {
          $scope.labels.push(item.fname);
          $scope.data.push(item.age);
      });
      $scope.dataChart = [$scope.data];
    });

请求已发送，答案已成功返回。但是图表没有显示在视图中。我不知道问题出在哪里。

Answer 1

angular 不支持为指令动态设置类。您将必须使用基本图表并type动态设置。