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

Question

我创建了一个带有 Angular 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 图表，因此 vm.chartColors 可能不是正确的语法，但这里的想法是成立的，即根据 [=21= 构建颜色数组] 数据中的数字。快速浏览 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 图表

How to change the color of the bar in barchart if the data is negative - Angular Charts

javascript

bar-chart

angularjs

chart.js

angular-chart