nvd3 piechart.js - 如何编辑工具提示?版本 1.8 [英] nvd3 piechart.js - How to edit the tooltip? version 1.8

问题描述

我正在使用 nvd3 的饼图.最近我将 nvd3 升级到 1.8.1，我需要
但我想为工具提示使用新样式:

新工具提示的 html 代码是什么?我需要覆盖工具提示，因为我需要一些自定义文本.

Jsfiddle 示例

带符号的Jsfiddle.

解决方案

如果您使用的是 NVD3 v1.8.1 工具提示标题将默认隐藏.但是试试这个:

piechartCurrent.tooltip.headerEnabled(false);

这是其来源的链接

更新答案

您需要删除 chart.tooltip.contentGenerator() 函数以使用默认样式，您一直在覆盖默认样式.

工具提示中有两部分，如果你想覆盖.关键和价值.Key 是显示图表元素的位置，例如:财务"

chart.tooltip.keyFormatter(function (d, i) {var 符号 = '';pieSectorData().forEach(function (entry) {//搜索关键数据并返回符号if (entry.key == d){符号 = entry.symbols}});返回 d + '(' + 符号 + ')'});

并且要在工具提示中使用 $ 符号格式化您的 值，请使用以下内容:

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

希望有帮助.

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.

解决方案

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.

这篇关于nvd3 piechart.js - 如何编辑工具提示?版本 1.8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！