chartjs 2+ 如何指定条形图着色

Question

我正在尝试使用以下库为我的条形图着色，但我无法正常工作并且颜色始终是随机的。数据工作正常。我在下面列出了它们的版本和加载顺序。希望这有帮助。

非常感谢任何帮助。

非常感谢，

代码片段

<script src="js/chartjs/Chart.js" defer></script>
<script src="js/angular-chart/angular-chart.min.js" defer></script>

库版本控制

AngularJS v1.5.0-rc.2
Chart.js版本：2.3.0
angular-chart.js版本：1.1.1

HTML 标记

<canvas id="line" class="chart chart-bar" chart-color="backgroundColour: 'Red'" chart-data="vm.chartData.data" chart-labels="vm.chartData.legends" chart-series="vm.series" chart-options="vm.options" chart-dataset-override="vm.datasetOverride" chart-click="vm.onClick"></canvas>

最终解法笔记

最终的工作解决方案使用 Angular 1.5.8

在控制器中设置颜色

Answer 1

您可以在控制器中指定颜色：

...
$scope.vm.colors = [ '#f7464a', '#949FB1'];
...

稍后在您的图表中使用：

<canvas id="line" class="chart chart-bar" chart-colors="vm.colors" chart-data="vm.chartData.data" chart-labels="vm.chartData.legends" chart-series="vm.series" chart-options="vm.options" chart-dataset-override="vm.datasetOverride" chart-click="vm.onClick"></canvas>

小demo

更新：

要设置全局颜色，您可以设置 Chart.defaults.global.colors 或使用 ChartJsProvider 并在 .config() 中设置颜色，如下所示（参见 documentation）：

ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9' ] });

现在，最后一个选项我无法开始工作，它更新了一些与实际使用的图表对象无关的不同图表对象。但是 Chart.defaults.global.colors 方法有效，请参阅更新后的 demo.

chartjs 2+ 如何指定条形图着色

chartjs 2+ how to specify bar chart colouring

angularjs

angular-chart

chart.js2