减少AngularJS中用于图表的Canvas html代码

Reducing Canvas html code for charts in AngularJS

本文关键字：Canvas html 代码 AngularJS 用于 减少      更新时间：2023-09-26

对于显示图表，我使用模块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];
    });

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

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

相关文章：