图表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
• 角图版本: 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>

最终解决方案注意到

最后的工作解决方案使用角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>

小演示

更新：

要设置全局颜色，可以设置Chart.defaults.global.colors或使用ChartJsProvider，并按如下方式在.config()中设置颜色(参见文档)：

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

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