在 angular nvd3 中使用不同的鼠标悬停值

Question

我有一个数据集，其中包含每百分之一的频率和绝对计数。数据集如下所示：

$scope.data = [
    {
        key: "Cumulative Return",
        values: [
                {
                    "label" : "A" ,
                    "value" : 15  ,
                    "data"  : 486
                } ,
                {
                    "label" : "B" ,
                    "value" : 11  ,
                    "data"  : 403
                } ,
                {
                    "label" : "C" ,
                    "value" : 10  ,
                    "data"  : 374
                } ,
                {
                    "label" : "D" ,
                    "value" : 9  ,
                    "data"  : 362
                } ,
                {
                    "label" : "E" ,
                    "value" : 8  ,
                    "data"  : 321
                } ,
                {
                    "label" : "F" ,
                    "value" : 6  ,
                    "data"  : 246
                } ,
                {
                    "label" : "G" ,
                    "value" : 4  ,
                    "data"  : 187
                } ,
                {
                    "label" : "H" ,
                    "value" : 1  ,
                    "data"  : 42
                }
            ]
        }
    ]

包含在 this plunker 中，您可以看到当鼠标悬停在每个条上时，它显示 A 15.0 等。我希望能够显示不同的值，特别是 "count"，作为 mouseover 行为，但在文档中看不到任何此类选项。我希望它显示为 A 486、B 403 等

我怎样才能做到这一点？

Answer 1

使用工具提示内容生成器配置

tooltip: {
   contentGenerator: function(record) {        
      return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span>&nbsp;' + record.data.label + ' ' + record.data.data + '</p>';
   }
},

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin: {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      },
      x: function(d) {
        return d.label;
      },
      y: function(d) {
        return d.value + (1e-10);
      },
      showValues: true,
      valueFormat: function(d) {
        return d3.format(',.4f')(d);
      },
      tooltip: {
        contentGenerator: function(record) {        
          return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span>&nbsp;' + record.data.label + ' ' + record.data.data + '</p>';
        }
      },
      duration: 500,
      xAxis: {
        axisLabel: 'X Axis'
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -10
      }
    }
  };

  $scope.data = [{
    key: "Cumulative Return",
    values: [{
        "label": "A",
        "value": 15,
        "data": 486
      },
      {
        "label": "B",
        "value": 11,
        "data": 403
      },
      {
        "label": "C",
        "value": 10,
        "data": 374
      },
      {
        "label": "D",
        "value": 9,
        "data": 362
      },
      {
        "label": "E",
        "value": 8,
        "data": 321
      },
      {
        "label": "F",
        "value": 6,
        "data": 246
      },
      {
        "label": "G",
        "value": 4,
        "data": 187
      },
      {
        "label": "H",
        "value": 1,
        "data": 42
      }
    ]
  }]
});

<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Angular-nvD3 Discrete Bar Chart</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <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>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

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

  <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>

</html>

在 angular nvd3 中使用不同的鼠标悬停值

Use Different Value on Mouseover in angular nvd3

angularjs

d3.js

nvd3.js

angular-nvd3