减少 Canvas html 中图表的代码 AngularJS

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>

用户可以选择查询。点击按钮returns查询相应图表。

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 不支持为指令动态设置 class。您将必须使用 base 图表并动态设置 type。

减少 Canvas html 中图表的代码 AngularJS

Reducing Canvas html code for charts in AngularJS

javascript

charts

canvas

angularjs

angular-chart