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

2019年8月6日 217次阅读

我正在寻找帮助来覆盖nvd3 bar(离散)图表的默认工具提示功能.

默认工具提示选择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 tick

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>';
            });

最佳答案 尝试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还应包含原始数据,包括任何额外属性.例如,如果输入数据具有“额外”属性(如{label：“A”,值：-29.76,extra：123}),则可以使用e.point.extra.

点赞