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"

然后，将变量中所需的类型传递给属性＆＃34; chart-type＆＃34;：

chart-type="type"

您可以选择以下类型之一：Line，Bar，Radar，PolarArea，Pie，Donut。

感谢@PankajParkar的一些帮助！

Answer 2

如果当前元素位于Astate currentState; public void changeState(STATE s){ if(currentState != null) currentState.dispose(); currentState = ...some code to instantiate the class and assign to this value currentState.init(); } / ng-repeat内，则ng-if位于您的内容和内容中。控制器内的type会有所不同。

如果简单的操作

，我会说它自己在HTML上做

type

<强>更新

要使用可以动态更改类型的图表，必须将类设置为：

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

在此之后，您需要指定一个带有范围值/表达式的class="chart-base"属性（this line将读取值＆amp;并通过this line监视该值，这样它就会确保图表将在类型更改时重新绘制）。当类型值改变时，它将自动重新呈现具有正确类型的图表。图表重新渲染需要它和类库。这将是一个有效的例子：

chart-type

以下是您可以使用的有效图表类型（接受from here）

<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。

在Chart.js

2 个答案: