使用 nvd3 显示离散图表的自定义工具提示

Question

我正在寻求帮助来覆盖 nvd3 条形图（离散）图表 的默认工具提示 功能。

默认工具提示选择 yAxis 刻度并显示在工具提示中。

但是，在我的例子中，我不想在工具提示中显示 yAxis 数据（以货币格式），而是我想显示实际的 yAxis 值（没有货币的原始值）。

这就是我向数据推送值的方式[]。

@foreach (var item in Model.BarChart)
  {
    string yvalue = item.Cost== 0 ? "undefined" : item.Cost.ToString();
    string xvalue = item.Date.ToString("yyyy/MM/dd");
    @:data[0].values.push({y: @yvalue, x: '@xvalue'});
  }

我正在使用以下代码行格式化 yAxis 刻度

chart.yAxis.tickFormat(function(d) { return d3.format(".1s")(d) + " USD" });

有什么提示吗？让我知道您是否需要更多信息？

谷歌搜索后，我发现了以下方式，但在此示例中 'y' 是 yAxis 值而不是原始值。那么，我如何用原始值替换这个 'y'？

chart.tooltip(function (key, x, y, e, graph) {
                return '<p><strong>' + key + '</strong></p>' +
                '<p>' + y + ' in the month ' + x + '</p>';
            });

Answer 1

尝试 e.value 而不是 y。

chart.tooltipContent(function (key, x, y, e, graph) {
    return '<p><strong>' + key + '</strong></p>' +
           '<p>' + e.value + ' in the month ' + x + '</p>';
    });

e.point 还应该包含原始数据，包括任何额外的属性。例如，如果您的输入数据具有 "extra" 属性（例如 { label : "A" , value : -29.76, extra: 123 }），那么您可以使用 e.point.extra.

使用 nvd3 显示离散图表的自定义工具提示

showing custom tooltip for Discrete chart using nvd3

nvd3.js