NVD3.js-根据价值范围，在多与垂直图中显示每个条的特定颜色

Question

正如主题所说，我只想根据y轴的值自定义每个条的颜色。

价值范围是：

• 0-50：绿色
• 50-75：黄色
• 75-100：红色

我试图在Google上经常搜索此主题，但找不到任何结果。

这个堆叠的问题是最接近我的答案的问题，但是不是NVD3。如果是这样，请告诉我我应该添加功能的位置。

我的代码如下： -

html： -

<nvd3 options="options" data="data2"></nvd3>

JS： -

/* Chart options */
$scope.options = { /* JSON data */
          chart: {
              type: 'multiBarChart',
              height: 250,
              showControls: false,
              margin : {
                  top: 20,
                  right: 20,
                  bottom: 45,
                  left: 45
              },
              clipEdge: true,
              duration: 500,
              stacked: true,
              xAxis: {
                  axisLabel: 'Time (ms)',
                  showMaxMin: false,
                  tickFormat: function(d){
                      return d3.format(',f')(d);
                  }
              },
              yAxis: {
                  axisLabel: 'Y Axis',
                  axisLabelDistance: -20,
                  tickFormat: function(d){
                      return d3.format(',.1f')(d);
                  }
              }
          },
// title options
title: {
    enable: true,
    text: 'Title for Line Chart'
},
// subtitle options
subtitle: {
    enable: true,
    text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet...',
    css: {
        'text-align': 'center',
        'margin': '10px 13px 0px 7px'
    }
},
// caption options
caption: {
    enable: true,
    html: 'Figure 1. Lorem ipsum dolor sit amet...',
    css: {
        'text-align': 'justify',
        'margin': '10px 13px 0px 7px'
    }
   }
 };
 /* Chart data */
 $scope.data2 = [{"key":"Thermal","values":[{"x":0,"y":44},{"x":1,"y":24},{"x":2,"y":66},{"x":3,"y":10},{"x":4,"y":33}]}];

Answer 1

在此答案中找到代码和本github问题的响应中的代码后，发现D3.Selectall（）可以在图表的回调选项中使用。

$scope.options = {
    chart: {
        type: 'multiBarChart',
        //...,
        callback: function(){
            d3.selectAll('rect.nv-bar')
            .style('fill', function(d, i) {
                  if (d.y > 75) {
                    return 'red';
                  }
                  if (d.y > 50) {
                    return 'yellow';
                  }
                  return 'green';
                });
            }
        }
    }
}

参见通过在下面的摘要中运行代码所应用的更改的演示。

var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
  $scope.options = { /* JSON data */
    chart: {
      type: 'multiBarChart',
      height: 250,
      showControls: false,
      margin: {
        top: 20,
        right: 20,
        bottom: 45,
        left: 45
      },
      clipEdge: true,
      duration: 500,
      stacked: true,
      xAxis: {
        axisLabel: 'Time (ms)',
        showMaxMin: false,
        tickFormat: function(d) {
          return d3.format(',f')(d);
        }
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -20,
        tickFormat: function(d) {
          return d3.format(',.1f')(d);
        }
      },
      callback: function() {
        //console.log('in callback');
        d3.selectAll('rect.nv-bar')
          .style('fill', function(data, index) {
              //console.log('data.y: ',data.y);
            if (data.y > 75) {
              return 'red';
            }
            if (data.y > 50) {
              return 'yellow';
            }
            return 'green';
          });
      }
    },
    // title options
    title: {
      enable: true,
      text: 'Title for Line Chart'
    },
    // subtitle options
    subtitle: {
      enable: true,
      text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet...',
      css: {
        'text-align': 'center',
        'margin': '10px 13px 0px 7px'
      }
    },
    // caption options
    caption: {
      enable: true,
      html: 'Figure 1. Lorem ipsum dolor sit amet...',
      css: {
        'text-align': 'justify',
        'margin': '10px 13px 0px 7px'
      }
    }
  };
  /* Chart data */
  $scope.data2 = [{
    "key": "Thermal",
    "values": [{
      "x": 0,
      "y": 44
    }, {
      "x": 1,
      "y": 24
    }, {
      "x": 2,
      "y": 66
    }, {
      "x": 3,
      "y": 10
    }, {
      "x": 4,
      "y": 33
    }]
  }];
});

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <nvd3 options="options" data="data2"></nvd3>
</div>

Answer 2

我使用以下代码更改bar颜色...我正在放置此代码，因为回调对我不起作用...您需要更改逻辑以根据您需要

dispatch: {
        renderEnd: function (e) {
            d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15).style("fill", function (d, i){
                if (i%4==0)
                {
                  return "#0064A5"
                }   
                else if (i%3==0)
                {
                  return "#2C76B8"
                } 
                else if (i%2==0)
                {
                  return "#004C76"
                }  
                else{
                  return "#004180"
                }     
            }); 

        }
      }