nvd3 工具提示显示索引而不是标签答案

【问题标题】：nvd3 tooltip is showing index instead of labelnvd3 工具提示显示索引而不是标签
【发布时间】：2017-02-07 06:32:14
【问题描述】：

我在multichart(multilinechart) 中遇到问题 nvd3 工具提示。这里我的XAxis 标签是JAN,FEB,MAR... DEC. 但是当我将鼠标悬停在图表中时，它显示0,1,2,3.. 11 作为工具提示标题。但我需要显示JAN,FEB.. DEC而不是索引。这是我的图表选项代码，

{
  "chart": {
    "type": "multiChart",
    "height": 400,
    "interpolate": "linear",
    "showLegend": false,
    "margin": {
      "top": 50,
      "right": 100,
      "bottom": 60,
      "left": 100
    },
    "reduceXTicks": false,
    "useVoronoi": false,
    "useInteractiveGuideline": true,
    "duration": 500,
    "xAxis": {
      "axisLabel": "MONTHLY",
      "tickPadding": 10,
      "tickSize": 1,
      "tickValues": [
        0,
        1,
        2,
        3,
        4,
        5,
        6
      ]
    },
    "yAxis1": {
      "axisLabel": "Left",
      "tickPadding": 10
    },
    "yAxis2": {
      "axisLabel": "Right",
      "width": 60,
      "tickPadding": 10
    },
    "yDomain1": [
      0,
      5
    ],
    "yDomain2": [
      0,
      100
    ]
  }
}

这是图像中的问题（需要显示 FEB，但显示的是 1），这是第二个（需要显示 MAR，但显示的是 2）

请有人帮忙找出问题，

提前致谢。

【问题讨论】：

你能用testdata创建一个jsfiddle吗？

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

你可以尝试使用interactiveLayer.tooltip.headerFormatter的方法来编辑header的标签，比如：

chart.interactiveLayer.tooltip.headerFormatter(d => {
      if (typeof d === 'string') return d
    })

【讨论】：