Question

我使用Angular Charts创建了一个水平条形图.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);

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

1 个答案: