工具提示中的 NVD3 输出日期格式为 %d/%m/%y，x 轴日期为 %d/%m答案

【问题标题】：NVD3 output date format in tooltip as %d/%m/%y and x-axis date as %d/%m工具提示中的 NVD3 输出日期格式为 %d/%m/%y，x 轴日期为 %d/%m
【发布时间】：2018-01-01 06:53:59
【问题描述】：

寻找一种在 NVD3 工具提示中输出日期格式与 x-axis 上的日期格式不同的方法。

当前显示日期为

chart.xAxis
  .tickFormat(function(d) {
    return d3.time.format('%d / %m')(new Date(d))
  });

它显示为

如何将工具提示中的日期输出为%d/%m/%y，同时将x-axis 保持为%d/%m？

【问题讨论】：

标签： javascript d3.js charts nvd3.js

【解决方案1】：

您可以使用chart.tooltip.contentGenerator 创建自定义工具提示。添加一行以所需格式输出日期。例如：

chart.tooltip.contentGenerator(function (d) {
          var html = "<h2>Date: "+ d3.time.format('%d/%m/%y')(new Date(d.value))+"</h2> <ul>";
          d.series.forEach(function(elem){
            html += "<li><h3 style='color:"+elem.color+"'>"
                    +elem.key+"</h3><b>"+elem.value+"</b></li>";
          })
          html += "</ul>"
          return html;

这是一个可用的 JSFiddle 供参考：http://jsfiddle.net/wgmpfa2p/5/

【讨论】：

这很好用。我唯一需要更改的是将chart.tooltip.contentGenerator 更改为chart.interactiveLayer.tooltip.contentGenerator，没有它，控制台就会出现contentGenerator 未定义的错误。更可能是由我的设置和所有文档引起的错误，我现在已经找到了适合您的解决方案的要点。再次感谢。