Question

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

我在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>

查看我的小提琴的更正版本：https://jsfiddle.net/s8pe2rrf/2/

<强>解释

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

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使用），所以看起来像该指令不知道正在向colors数组添加新值，因此触发了侦听器只有当下次调用$ apply时，恰好是点击下拉列表。

点击angular-bootstrap-dropdown

1 个答案: