Question

我有以下d3饼图

我是使用以下js代码创建的

function piechart（）{

var usapass = 20;
var usafail = 40;
var usasum = usapass + usafail;

var englandpass = 10;
var englandfail = 60;
var englandsum = englandpass + englandfail;



var pieChartData = [
    { 'label': 'USA', 'value' : usasum, 'color': COLOR_RED }, 
    { 'label': 'ENGLAND', 'value' : englandsum, 'color': COLOR_ORANGE }
];

nv.addGraph(function() {
    var pieChart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .labelThreshold(.05);

    d3.select('#nv-pie-chartmy').append('svg')
        .datum(pieChartData)
        .transition().duration(350)
        .call(pieChart);

    return pieChart;
});
}

和我的HTML代码

 <div id="nv-pie-chartmy" class="height-sm"></div>

当前，当鼠标悬停在一个切片上时，它会显示“ USA 60”，如图所示。但是我希望它显示类似波纹管的东西

美国及格：20 失败：40

未显示全部计数。当前显示全部计数。任何想法如何显示它

Answer 1

首先，您需要将要显示的数据包括在pieChartData变量中，例如：

var pieChartData = [
    { 'label': 'USA', 'value' : usasum, 'pass': usapass, 'fail': usafail, 'color': COLOR_RED }, 
    { 'label': 'ENGLAND', 'value' : englandsum, 'pass': englandpass, 'fail': englandfail, 'color': COLOR_ORANGE }
];

然后，您可以在创建图表时使用tooltipContent函数来访问和显示所需的工具提示内容，例如：

var pieChart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .labelThreshold(.05)
      .tooltipContent(function (label, val, nv_d) { return label + ' Pass: ' + nv_d.point.pass + ' Fail: ' + nv_d.point.fail } );

如果要使用更复杂的工具提示布局，可以在tooltipContent函数的返回值中包含HTML。例如：

.tooltipContent(function (label, val, nv_d) { return '<h3>' + label + '</h3> Pass: ' + nv_d.point.pass + ' Fail: ' + nv_d.point.fail } );

来源：this Stackoverflow answer

中的两个建议的组合

Answer 2

tooltipContent已过时，tooltip已移入它自己的对象中。

使用chart.tooltip.contentGenerator（），并传入一个用于构建内容的函数。

      chart.tooltip.contentGenerator(function (d) {
      var html = "<h2>"+d.value+"</h2> <ul>";

      d.series.forEach(function(elem){
        html += "<li><h3 style='color:"+elem.color+"'>"
                +elem.key+"</h3> : <b>"+elem.value+"</b></li>";
      })
      html += "</ul>"
      return html;
    })

    return chart;
});

d3图表将鼠标悬停在一个切片中显示多个标签

2 个答案: