动态更改 Angular js charts.js 图表类型

Question

大家，我正在使用 Angular js 1.6 和 angular 图表 [of chart.js] 我试图在更改 [=24] 的值时更改图表的类型=] select 输入如下，但图表类型没有改变。我在一些常见问题解答中发现图表需要销毁并重新创建，但这不适用于 angular 版本。这是我的代码：

观点：

 <select ng-change="changeChartType(selectedType)" ng-model="selectedType" >
            <option ng-repeat="t in chartType" value={{t.type}}>{{t.dispName}}</option>
      </select>
      <p>{{selectedType}}</p>

    <div id="chartContainer">
    <canvas id="doughnut" class={{selectedType}}
    chart-data="data" chart-labels="labels">
    </canvas> 
    </div>

当我使用此代码时，class 发生变化，例如从 "chart chart-pie" 变为 "chart chart-doughnut"，但图表本身没有变化。

我是不是漏掉了什么？

Answer 1

您必须使用 "chart-type" 指令动态更改图表类型。他们已经开箱即用。

检查这个插件：http://plnkr.co/edit/xKrCCcEQpzEvxfUMJKzd?p=preview

    <canvas id="bar" class="chart-base" chart-type="selectedType"
  chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>

参考：http://jtblin.github.io/angular-chart.js/#base-chart（搜索 "dynamic chart"）

动态更改 Angular js charts.js 图表类型

Change Angular js charts.js chart type dynamically

angularjs

chart.js

angular-chart