时间戳

首页 > 解决方案 > d3图表在鼠标悬停时在一个切片中显示多个标签

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

问题描述

我有以下 d3 饼图

在此处输入图像描述

我使用以下 js 代码创建了这个

函数饼图（）{

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

不显示全部计数。当前显示整个计数。任何想法如何显示它

标签： javascripthtmld3.js

解决方案

首先，您需要在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 } );

资料来源：此 Stackoverflow 答案中的两个建议的组合

推荐阅读