javascript - 在 Chart.js 中使用 ng-class

Question

我正在使用基于 Charts.js 的 Angular 图表模块。它工作得非常好，但现在我正在尝试以一种可以从组合框中选择多个选项的方式更改我的应用程序，因此图表会重新编译并刷新为我想要的新型图表。

我尝试为此目的使用 ng-class，但不知何故它不起作用(图表永远不会被编译；DOM 元素在那里，但您实际上看不到任何东西)。

这是我的图表和选择器:

<div class="main-chart" ng-show="showChart" ng-cloak>
    <span class="label title">{{title}}</span>
    <canvas id="grafico" ng-class="chartclass"
    chart-data="data" chart-labels="labels">
    </canvas>
    <select name="typeSelector" id="chartType" class="form-control" ng-model="type" ng-change="changeChart()">
        <option ng-selected="true" value="doughnut">Circle</option>
        <option value="bars">Bars</option>
    </select>
</div>

这些是我的 Controller 涉及的部分，两个变量(一个用于选择器，一个用于图表类)，以及在执行单击后更改类的函数:

$scope.type = "";
$scope.chartclass = "chart chart-doughnut";

$scope.changeChart = function(){

    $scope.chartclass = "chart chart-"+$scope.type;
}

类名已正确更改，但我什么也没看到。也许我必须调用 $compile 函数，使用带有链接的自定义指令，或者其他什么？我是 Angular 的新手，所以我很乐意看到一个好的建议!

谢谢!

编辑:让我重复一遍:类名已正确更改!问题不在于更改有效的类名，问题在于显示的实际图表。它保持隐藏状态，就好像它从未被编译过一样。

编辑 2: 在这些图片中查看。第一张图片显示正常使用“class”属性，第二张图片显示我们正在尝试的是动态选择类名(使用 ng-class)。正如我所说，DOM 得到了正确的更改，所以类名没问题!问题是，不知何故，它只是不显示图表:

http://imgur.com/a/SJbzg

编辑 3: 这是我目前拥有的:

Controller 上的简单变量声明，初始化以显示圆环图类型:

$scope.chartType = "Doughnut";

这里是 DOM:

<div class="main-chart" ng-show="showChart" ng-cloak>
    <span class="label title">{{title}}</span>
<canvas id="grafico" chart-type="chartType"
    chart-data="data" chart-labels="labels">
</canvas>
    <select name="typeSelector" id="typeOfChart" class="form-control" ng-model="chartType">
        <option ng-selected="true" value="Doughnut">Circle</option>
        <option value="Bar">Bars</option>
    </select>
</div>

我做错了什么？为什么图表永远不会呈现？

Answer 1

解决这个问题的方法是选择类:

class="chart-base"

然后，将您想要的类型传递给变量“chart-type”属性:

chart-type="type"

您可以选择以下类型之一:Line、Bar、Radar、PolarArea、Pie、Doughnut。

感谢@PankajParkar 提供的一些帮助!