javascript - 将 ng-class 与 Chart.js 结合使用

Question

我正在使用基于 Charts.js 的 angular-charts 模块。它工作得非常好，但现在我正在尝试更改我的应用程序，以便我可以从组合框中选择许多选项，以便图表被重新编译并刷新为我想要的新类型的图表。

我尝试使用 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 已正确更改，因此类名没问题!问题是，不知何故它只是不显示图表:

/image/adzbR.jpg

编辑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"

您可以选择以下类型之一:折线图、条形图、雷达图、极坐标图、饼图、圆环图。

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