如何更改欄的顏色條形圖中，如果數據爲負 -

Question

我創建了一個水平條形圖與角Charts.The HTML角圖表看起來是這樣的：

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

JavaScript的變量是這樣的：

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

我想在欄的顏色變爲紅色負數據（在這種情況下，-30），並與積極數據所有的酒吧應該是綠色的（10,20,40,50）。

在此先感謝！

Answer 1

我會通過你的chartData循環，並使用條件構建你的數組的顏色。公平的警告，我不熟悉Angular Charts，所以vm.chartColors可能不是正確的語法，但這裏的想法是成立的，它是根據數據中的負數/正數來構建顏色數組。快速瀏覽angularcharts.js意味着您可以使用參數設置顏色來覆蓋默認顏色。

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);