nvd3 piechart.js - How to edit the tooltip? version 1.8

问题

I have am using piechart by nvd3. Lately I upgraded nvd3 to 1.8.1 and I need to overwrite tooltip. This is my code from older version:

piechartCurrent.tooltip.contentGenerator(function (obj) {
        content = '<h3 style="background-color: ';
        content += obj.color + '">';
        content += obj.data.key + '</h3><p>$' +  Math.round(obj.data.y * 100) / 100 + ' ('+ obj.data.symbols +')</p>';
        return content;
    });

Which looks like this:

But I would like to use new style for tooltip:

What is html code for new tooltip? I need to overwrite tooltip, since I need some custom text there.

Edit:
Jsfiddle example

Edit 2: Jsfiddle with symbols.

回答1:

If you are using NVD3 v1.8.1 the tooltip header will hidden by default. But try this :

piechartCurrent.tooltip.headerEnabled(false);

Here is a link to its source

UPDATED ANSWER

You need to remove the chart.tooltip.contentGenerator() function to use the default styles, you have been overriding the default all this time.

There are two parts in the tooltip, if you want to override. The Key and the Value. The Key is where the chart element is displayed, eg: "Finance"

chart.tooltip.keyFormatter(function (d, i) {
    var symbol = '';

    pieSectorData().forEach(function (entry) {
       // Search data for key and return the symbols
       if (entry.key == d){
           symbol = entry.symbols
       }
    });
    return  d + '(' + symbol + ')'
});

And to format your value in the tooltip with the $ symbol use the following :

chart.tooltip.valueFormatter(function (d, i) {
    return '$' + d
});

Hope it helps.

回答2:

For some reason shabeer90's answer did not work for me after all. I was working/changing symbols in js file and that did not take any effect. So I used my original code tooltip.contentGenerator. I simple hardcoded color in there with div:
style.css:

.square-box {
float: left;
width: 10px;
height: 10px;
margin: 4px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}

and js to edit chart's toltip:

chart.tooltip.contentGenerator(function (obj) {
        content = '<p><div class="square-box" style="background-color:'+obj.color+';"></div> '+
                obj.data.key +' ('+ obj.data.symbols +') <strong>$' +  Math.round(obj.data.y * 100) / 100 + '</strong> </p>';
        return content;
    });

来源：https://stackoverflow.com/questions/33044058/nvd3-piechart-js-how-to-edit-the-tooltip-version-1-8

标签

nvd3.js