Javascript 减少AngularJS中图表的画布html代码

对于显示图表，我正在使用模块。角度应用程序需要两种图表，条形图和折线图。目前，这些图表是在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>

---

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

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

类型

。

这意味着当我将

图表类型

例如设置为

行

时，我将在视图中获得折线图。非常感谢。。我忽略了github站点上的动态部分：）

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