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

【问题标题】：How to change the color of the bar in barchart if the data is negative - Angular Charts如果数据为负数，如何更改条形图中条形的颜色 - Angular Charts
【发布时间】：2016-09-13 18:04:16
【问题描述】：

我用 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）。

提前致谢！！

【问题讨论】：

标签： javascript angularjs bar-chart chart.js angular-chart

【解决方案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);

【讨论】：