nvd3.js - 根據值的範圍顯示多欄垂直圖表中每個欄的特定顏色

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，發現 可以在圖表的回調選項中使用。

$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>