Question

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

价值颜色的范围是：

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

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

此stackoverflow question最接近我的回答，但不适用于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

找到this answer中的代码和this github issue的回复中的代码后，发现了 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

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

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"

                }     

            }); 



        }
      }

nvd3.js - 根据值的范围显示多栏垂直图表中每个条形的特定颜色

2 个答案: