在Chart.js中使用ng-class

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>

这些是控制器中涉及的部分，两个变量（一个用于选择器，一个用于图表类），以及在单击后更改类的函数：

$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：这是我目前拥有的：

控制器上的简单变量声明，已初始化以显示甜甜圈图类型：

$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"

您可以选择以下类型之一：线，条，雷达，PolarArea，饼图，甜甜圈。

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

Answer 2

如果您目前的元素里面ng-repeat / ng-if然后type您的内容与内部type的内部控制会有所不同。

我想说的是，如果操作简单，就可以在HTML上自行完成

ng-class="'chart chart-'+ type"

更新

为了使用可以在其中动态更改类型的图表，必须将类设置为此：

class="chart-base"

之后，您需要指定一个具有作用域值/表达式的chart-type属性（ 此行将读取值并通过此行监视该值，以确保图表在类型更改时能够重新绘制）。 当类型值更改时，它将自动使用正确的类型重新呈现图表。 图表重新呈现需要它和基于类的。 这将是一个工作示例：

<canvas id="grafico" class="chart-base" chart-type="type"
    chart-data="data" chart-labels="labels">
</canvas>

以下是您可以使用的有效图表类型（ 从此处获取 ）

.directive('chartBase', function (ChartJsFactory) { return new ChartJsFactory(); })
.directive('chartLine', function (ChartJsFactory) { return new ChartJsFactory('Line'); })
.directive('chartBar', function (ChartJsFactory) { return new ChartJsFactory('Bar'); })
.directive('chartRadar', function (ChartJsFactory) { return new ChartJsFactory('Radar'); })
.directive('chartDoughnut', function (ChartJsFactory) { return new ChartJsFactory('Doughnut'); })
.directive('chartPie', function (ChartJsFactory) { return new ChartJsFactory('Pie'); })
.directive('chartPolarArea', function (ChartJsFactory) { return new ChartJsFactory('PolarArea'); });

因此，类型值可以是Line ， Bar ， Radar ， PolarArea ， Pie ， Doughnut 。