如果数据为负，如何更改条形图中条形图的颜色 - Angular Charts

Question

I have created a horizontal barchart with Angular Charts.The HTML looks like this:

    <canvas id="base" class="chart-horizontal-bar"
            chart-data="vm.chartData" 
            chart-labels="vm.chartLabels">
    </canvas>

The JavaScript variables look like this :

 var vm = this;
 vm.chartData = [10,20,-30,40,50];
 vm.chartLabels = ["A","B","C","D","E"];

I want to change the color of the bar to red for negative data(in this case -30) and all the bars with positive data should be green (10,20,40,50).

Thanks in advance!!

Answer 1

I would loop through your chartData and using a condition build out your array for colors. Fair warning, I'm not familiar with Angular Charts, so vm.chartColors may not be the right syntax, but the idea here holds, which is to build an array of your colors based on negative/positive numbers in your data. A quick look at angularcharts.js implied you can set the colors with an argument to override the default colors.

 var vm = this; vm.chartData = [10,20,-30,40,50]; vm.chartLabels = ["A","B","C","D","E"]; var colors = []; for(i=0; i < vm.chartData.length; i++) { if (vm.chartData[i] < 0) { colors[i] = "rgb(255,0,0)"; } else { colors[i] = "rgb(0,255,0)"; } } vm.chartColors = colors; console.log(vm.chartColors);