如何修改水平多条形图 NVD3 的工具提示

Question

是否可以在水平多条中修改第二条数据的工具提示？

例如较蓝的数据和浅蓝色的工具提示必须有单独的工具提示。

这是我的 nvd3 代码。

nv.addGraph(function() {
    var chart = nv.models.multiBarHorizontalChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
      //  .yDomain([0, parseFloat(maxY)])
        .margin({top: 30, right: 20, bottom: 50, left: 175})
        .showValues(false)           //Show bar value next to each bar.
        .showControls(false);        //Allow user to switch between "Grouped" and "Stacked" mode.


    d3.select('#bar_chart svg')
        .datum(sample_json())
        .transition().duration(1000)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

这是我的示例 json

function sample_json(){
var data = [
  {
    "key": "Example A",
    "color": "#4f99b4",
    "values": [
      {
        "label" : "200000200000000" ,
        "value" : 2.8082472075876
      } , 
      {
        "label" : "200000200000000" ,
        "value" : 3.8082472075876
      } 
    ]
  },
  {
    "key": "Example B",
    "color": "#ff7f0e",
    "values": [
      {
        "label" : "200000200000000" ,
        "value" : 3.8082472075876
      }
    ]
  },
  {
    "key": "Example C",
    "color": "#aec7e8",
    "values": [
      {
        "label" : "200000200000000" ,
        "value" : 8.8082472075876
      } 
    ]
  }
]

return data;
}

我已经尝试过 .tooltip 并且有一些功能，但它不起作用.. 蒂亚！

Answer 1

您可以这样做。您可以使用 tooltip 和 tooltipContent 属性，然后使用 if else 或 switch 语句检查系列。

var chart = nv.models.multiBarHorizontalChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
  //  .yDomain([0, parseFloat(maxY)])
    .margin({top: 30, right: 20, bottom: 50, left: 175})
    .showValues(false)           //Show bar value next to each bar.
    .showControls(false)
    .tooltips(true)
    .tooltipContent(function(key, y, e, graph) {
      var tooltip_content = '';
      if(key == 'Example A'){
        tooltip_content = '';//tooltip content here
      }else if (key == 'Example B'){
        tooltip_content = '';//tooltip content here
      }else if (key == 'Example C'){
        tooltip_content = '';//tooltip content here
      }
      return tooltip_content;
    });