nvd3中的cumulativeLineChart上的自定义工具提示

Question

当我将鼠标悬停在累积折线图上的线条上时,我会在某个时间获得工具提示消息x值.我想编辑此邮件并添加更多内容.

因为在我的values数组中我有json包含{X:x,Y:y,Z:z,Dt:date}我希望在日期显示一个自定义消息列出X/Y/Z.

Answer 1

我正在使用nvd3 veraion 1.1.15b.

调用.tooltip()对我不起作用,但是调用.tooltipContent()了,如下面的代码所示:

        var chart = nv.models.pieChart()
            .x(function (d) { return d.file; })
            .y(function (d) { return d.size; })
            .tooltipContent(function (key, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                    '<p>' + e.value.toSizeFmt() + '</p>';
            })

正如Andrei在上面指出的那样,该e参数提供了对原始值的访问,因此您可以对它们进行格式化,而不是使用y已经格式化的文本.希望这可以帮助!

Answer 2

如果您还没有找到合适的解决方案，请尝试以下操作 -

nv.addGraph(function() {
    var chart = nv.models.cumulativeLineChart().x(function(d) {
        return d[0]
    }).y(function(d) {
        return d[1]
    }).color(d3.scale.category10().range()).tooltip(function(key, x, y, e, graph) {
        return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
    });
});

希望能帮助到你。