NVD3：系列的 multiChart 格式错误

Question

我正在使用 NVD3 multiChart 模型制作图表，我有 4 个系列，3 个柱状图与左侧 yAxis 关联，1 条线与右侧 yAxis 关联。

这 3 个柱只有一个浮点值，其中线条有百分比。一切正常，但工具提示中有一些问题，日期格式不正确（实际上根本没有格式化）。

你知道我怎样才能拥有与底部相同的日期格式吗？

1458428400 -> 20-03-16

谢谢

Answer 1

您可以执行以下操作：

定义一个将纪元转换为合适日期的函数。像这样：

function epochToNiceDate(epoch) {
    var date = new Date(0);
    date.setUTCSeconds(epoch);
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    return day + "-" + month + "-" + year;
}

将工具提示的内容生成器函数传递到图表（假设您启用了 useInteractiveGuideline）。您可以浏览 NVD3 和 copy/paste 默认内容生成器的源代码，然后根据需要进行修改。让我们以下面的例子为例：

chart.interactiveLayer.tooltip.contentGenerator(function (d) {
    var tooltipTitle = epochToNiceDate(d.value);
    var tooltip = "";

    tooltip += "<table>";
    tooltip += "<thead>";
    tooltip += "<tr><td colspan='3'><strong class='x-value'>" + tooltipTitle + "</strong></td></tr>";
    tooltip += "</thead>";
    tooltip += "<tbody>"

    for(var i in d.series) {
        var currentSeries = d.series[i];
        var color = currentSeries.color;
        var key = currentSeries.key;
        var value = currentSeries.value;

        tooltip += "<tr>";
        tooltip += "   <td class='legend-color-guide'>";
        tooltip += "      <div style='background-color: " + color + ";'></div>";
        tooltip += "   </td>";
        tooltip += "   <td class='key'>" + key + "</td>";
        tooltip += "   <td class='value'>" + value + "</td>";
        tooltip += "</tr>";
    }

    tooltip += "</tbody>";
    tooltip += "</table>";

    return tooltip;
});

您可以在此处查看实际效果：https://jsfiddle.net/Luc93/qf4u5439/

祝你好运！

Answer 2

事实证明这是一个错误，以防其他人需要您可以使用的补丁我已经完成了拉取请求：

https://github.com/novus/nvd3/issues/1406

NVD3：系列的 multiChart 格式错误

NVD3: multiChart wrong format for series

d3.js

charts

formatting

nvd3.js