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

Question

是否可以在Horizo​​ntal Multi-Bar中修改第二个数据的工具提示？

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

这是我的nvd3代码。

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;
}

这是我的样本json

{{1}}

我试过.tooltip并且有一些功能，但它不起作用.. TIA！

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;
    });