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

Question

我用 Angular 图表创建了一个水平条形图。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 图表，因此 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);