Angular.js 点击 angular-bootstrap-下拉菜单时图表重绘

Question

我遇到了 angular-chartjs 的问题，这让我很生气。

我在旁边有一个 bootstrap 下拉菜单（使用 angular-ui-bootstrap），由 angular-chartjs 使用。

当图表的数据源中的项目超过 7 个时，单击下拉菜单会使图表重绘一次。我找不到解释为什么会这样。

Jsfiddle：https://jsfiddle.net/vz4qhqpw/378/

转到第二个选项卡并单击下拉菜单。图表将重新绘制。现在转到 javascript 代码并将最后一行更改为调用 updateData2() 而不是 updateData()，问题就消失了。在 updateData2() 中向数组添加超过 7 个项目也会导致问题发生。

怎么回事？

Answer 1

尝试为每个图表明确提供图表颜色（例如，生成一组随机颜色并将其传递给每个图表）：

<!-- added chart-colors attribute -->
<canvas class="chart chart-base"
    chart-options="categories[heading].options"
    chart-type="categories[heading].chartType"
    chart-data="categories[heading].data"
    chart-labels="categories[heading].labels"
    chart-colors="categories[heading].colors"
    height="130">
</canvas>

查看我对您的 fiddle 的更正版本：https://jsfiddle.net/s8pe2rrf/2/

解释：

查看angular-chart.js源代码，您可能会看到该指令为每个属性添加了监视，包括chart-colors

scope.$watch('chartColors', watchOther, true);

并在更改属性值时重新创建图表。

如果您一开始没有指定颜色，则使用默认的颜色数组，其中包含 7 个项目（这就是魔法 7 的来源！）：

Chart.defaults.global.colors = [
  '#97BBCD', // blue
  '#DCDCDC', // light grey
  '#F7464A', // red
  '#46BFBD', // green
  '#FDB45C', // yellow
  '#949FB1', // grey
  '#4D5360'  // dark grey
];

当您的图表包含超过 7 个项目时，chart.js 会根据需要在内部添加额外的颜色。看起来这会触发上面提到的侦听器。

但是为什么在选择下拉菜单时会发生这种情况？ Chart.js 不是本机 Angular 库（它通过 "proxy"、angular-chart.js 使用），所以看起来像该指令不知道新值正在添加到颜色数组中，因此触发了侦听器只有在下次调用 $apply 时，这恰好是点击下拉菜单。

Angular.js 点击 angular-bootstrap-下拉菜单时图表重绘

Angular.js chart redraws when clicking on angular-bootstrap-dropdown

javascript

angularjs

angular-ui-bootstrap

angular-chart