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

时间:2018-01-01 06:53:59

标签: javascript d3.js charts nvd3.js

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

目前将日期显示为

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

并显示为 screenshot of current

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

1 个答案:

答案 0 :(得分: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/