2017-01-09 76 views
1

我尝试使用以下库虽然我没有得到这个工作对我的色彩柱状图和颜色总是随机的。数据正常工作。我已经包含了下面加载的版本和顺序。希望这可以帮助。chartjs 2+如何指定条形图着色

任何帮助非常感谢。

非常感谢,

代码片断

<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
  • 角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> 

最终溶液注意到

最终工作溶液使用角设置的颜色在控制器1.5.8

回答

0

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

... 
$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

UPDATE:

设置全局颜色,你可以设置Chart.defaults.global.colors或使用ChartJsProvider和设置颜色在.config()如下(见documentation):

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

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

+0

感谢您的意见,这似乎为条形图工作,但我们有用户切换它作为一个饼图的能力。当饼图显示时,颜色恢复为默认值?条形图和饼图之间的颜色是如何区别的? – Martin

+0

我会尝试设置控制器中的颜色,并让你知道它是否有效。全局设置会很好,但现在只要颜色正确渲染,这可能是以后的事情。 – Martin