悬停时，多个嵌套的甜甜圈图未显示气球文本

Question

同一页面上的多个嵌套甜甜圈图无法正常工作。 我有两个嵌套的甜甜圈图。 一个显示ball0on文本，另一个则不显示。 如果我在第一个嵌套的甜甜圈中有4个图表，在第二个嵌套的甜甜圈中有两个图表，则气球文本将在第一个甜甜圈的最后两个外部图表以及第二个甜甜圈的两个内部图表中显示。

参考： 使用多个饼图实例模拟嵌套的甜甜圈图

“插件：操纵图表的z索引”也在那里。

JSFIDDLE： 问题陈述

将鼠标悬停在第一个嵌套的甜甜圈图内部饼图上，然后将鼠标悬停在第二个嵌套的甜甜圈图饼图上。

我在这里没有任何有用的数据： 文档 。

如何使气球显示在所有图表上？

 /** * Plugin: Manipulate z-index of the chart */ AmCharts.addInitHandler(function(chart) { // init holder for nested charts if (AmCharts.nestedChartHolder === undefined) AmCharts.nestedChartHolder = {}; if (chart.bringToFront === true) { chart.addListener("init", function(event) { // chart inited var chart = event.chart; var div = chart.div; var parent = div.parentNode; // add to holder if (AmCharts.nestedChartHolder[parent] === undefined) AmCharts.nestedChartHolder[parent] = []; AmCharts.nestedChartHolder[parent].push(chart); // add mouse mouve event chart.div.addEventListener('mousemove', function() { // calculate current radius var x = Math.abs(chart.mouseX - (chart.realWidth / 2)); var y = Math.abs(chart.mouseY - (chart.realHeight / 2)); var r = Math.sqrt(x * x + y * y); // check which chart smallest chart still matches this radius var smallChart; var smallRadius; for (var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) { var checkChart = AmCharts.nestedChartHolder[parent][i]; if ((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) { checkChart.div.style.zIndex = 1; } else { if (smallChart !== undefined) smallChart.div.style.zIndex = 1; checkChart.div.style.zIndex = 2; smallChart = checkChart; smallRadius = checkChart.radiusReal; } } }, false); }); } }, ["pie"]); /** * Create the charts */ var pie1 = AmCharts.makeChart("chart1", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "$", "value": 100, "color": "#090E0F" }], "startDuration": 0, "pullOutRadius": 0, "color": "#fff", "fontSize": 14, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -25, "labelColor": "#fff", "radius": 25, "innerRadius": 0, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pie2 = AmCharts.makeChart("chart2", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Marketing", "value": 33, "color": "#BA3233" }, { "title": "Production", "value": 33, "color": "#624B6A" }, { "title": "R&D", "value": 33, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 9, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -28, "labelColor": "#fff", "radius": 80, "innerRadius": 27, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pie3 = AmCharts.makeChart("chart3", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Online", "value": 11, "color": "#BA3233" }, { "title": "Print", "value": 11, "color": "#BA3233" }, { "title": "Other", "value": 11, "color": "#BA3233" }, { "title": "Equipment", "value": 16.5, "color": "#624B6A" }, { "title": "Materials", "value": 16.5, "color": "#624B6A" }, { "title": "Labs", "value": 16.5, "color": "#6179C0" }, { "title": "Patents", "value": 16.5, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 8, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -27, "labelColor": "#fff", "radius": 135, "innerRadius": 82, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pi4 = AmCharts.makeChart("chart4", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Design", "value": 5.5, "color": "#BA3233" }, { "title": "P&P", "value": 5.5, "color": "#BA3233" }, { "title": "Magazines", "value": 11, "color": "#BA3233" }, { "title": "Outdoor", "value": 3.66, "color": "#BA3233" }, { "title": "Promo", "value": 3.66, "color": "#BA3233" }, { "title": "Endorsement", "value": 3.66, "color": "#BA3233" }, { "title": "Maintenance", "value": 8.25, "color": "#624B6A" }, { "title": "Acquisition", "value": 8.25, "color": "#624B6A" }, { "title": "Raw", "value": 5.5, "color": "#624B6A" }, { "title": "Recycling", "value": 5.5, "color": "#624B6A" }, { "title": "Logistics", "value": 5.5, "color": "#624B6A" }, { "title": "LAB1", "value": 3.3, "color": "#6179C0" }, { "title": "LAB2", "value": 3.3, "color": "#6179C0" }, { "title": "LAB3", "value": 3.3, "color": "#6179C0" }, { "title": "Supply", "value": 3.3, "color": "#6179C0" }, { "title": "Disposal", "value": 3.3, "color": "#6179C0" }, { "title": "Application", "value": 5.5, "color": "#6179C0" }, { "title": "Acquisition", "value": 5.5, "color": "#6179C0" }, { "title": "Settlement", "value": 5.5, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 8, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -27, "labelColor": "#fff", "radius": 190, "innerRadius": 137, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]", "allLabels": [{ "text": "ACME Inc. Spending Chart", "bold": true, "size": 18, "color": "#404040", "x": 0, "align": "center", "y": 20 }] }); var pie5 = AmCharts.makeChart("chart11", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "$", "value": 100, "color": "#090E0F" }], "startDuration": 0, "pullOutRadius": 0, "color": "#fff", "fontSize": 14, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -25, "labelColor": "#fff", "radius": 25, "innerRadius": 0, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pie6 = AmCharts.makeChart("chart22", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Marketing", "value": 33, "color": "#BA3233" }, { "title": "Production", "value": 33, "color": "#624B6A" }, { "title": "R&D", "value": 33, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 9, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -28, "labelColor": "#fff", "radius": 80, "innerRadius": 27, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); 

 #charts, #charts1 { width: 200px; height: 500px; position: relative; margin: 0 auto; font-size: 8px; flex: 1; } #charts { width: 400px; } .chartdiv { width: 400px; height: 500px; position: absolute; top: 0; left: 0; } #parent { display: flex; width: 700px; border: 2px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/pie.js"></script> <div id="parent"> <div id="charts"> <div id="chart1" class="chartdiv"></div> <div id="chart2" class="chartdiv"></div> <div id="chart3" class="chartdiv"></div> <div id="chart4" class="chartdiv"></div> </div> <div id="charts1"> <div id="chart11" class="chartdiv"></div> <div id="chart22" class="chartdiv"></div> <div id="chart33" class="chartdiv"></div> <div id="chart44" class="chartdiv"></div> </div> </div> 

Answer 1

嵌套插件有一个错误，即它使用对元素的引用来保存嵌套，当您有多组嵌套饼图时，该错误将不起作用。 一个快速的解决方法是让它使用图表div的父元素ID来确保将每组饼图正确分组：

var parent = div.parentNode.id;

当然，这将增加一个依赖性，即容器div必须具有ID，但这是一个很小的要求。

如果其他div没有饼图，则还需要删除它们，因为它们将防止在第二列的图表上触发mouseover事件。

更新后的代码如下：

 /** * Plugin: Manipulate z-index of the chart */ AmCharts.addInitHandler(function(chart) { // init holder for nested charts if (AmCharts.nestedChartHolder === undefined) AmCharts.nestedChartHolder = {}; if (chart.bringToFront === true) { chart.addListener("init", function(event) { // chart inited var chart = event.chart; var div = chart.div; var parent = div.parentNode.id; //changed to use the parent's ID instead of a reference. // add to holder if (AmCharts.nestedChartHolder[parent] === undefined) { AmCharts.nestedChartHolder[parent] = []; } AmCharts.nestedChartHolder[parent].push(chart); // add mouse mouve event chart.div.addEventListener('mousemove', function() { // calculate current radius var x = Math.abs(chart.mouseX - (chart.realWidth / 2)); var y = Math.abs(chart.mouseY - (chart.realHeight / 2)); var r = Math.sqrt(x * x + y * y); // check which chart smallest chart still matches this radius var smallChart; var smallRadius; for (var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) { var checkChart = AmCharts.nestedChartHolder[parent][i]; if ((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) { checkChart.div.style.zIndex = 1; } else { if (smallChart !== undefined) smallChart.div.style.zIndex = 1; checkChart.div.style.zIndex = 2; smallChart = checkChart; smallRadius = checkChart.radiusReal; } } }, false); }); } }, ["pie"]); /** * Create the charts */ var pie1 = AmCharts.makeChart("chart1", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "$", "value": 100, "color": "#090E0F" }], "startDuration": 0, "pullOutRadius": 0, "color": "#fff", "fontSize": 14, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -25, "labelColor": "#fff", "radius": 25, "innerRadius": 0, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pie2 = AmCharts.makeChart("chart2", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Marketing", "value": 33, "color": "#BA3233" }, { "title": "Production", "value": 33, "color": "#624B6A" }, { "title": "R&D", "value": 33, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 9, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -28, "labelColor": "#fff", "radius": 80, "innerRadius": 27, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pie3 = AmCharts.makeChart("chart3", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Online", "value": 11, "color": "#BA3233" }, { "title": "Print", "value": 11, "color": "#BA3233" }, { "title": "Other", "value": 11, "color": "#BA3233" }, { "title": "Equipment", "value": 16.5, "color": "#624B6A" }, { "title": "Materials", "value": 16.5, "color": "#624B6A" }, { "title": "Labs", "value": 16.5, "color": "#6179C0" }, { "title": "Patents", "value": 16.5, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 8, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -27, "labelColor": "#fff", "radius": 135, "innerRadius": 82, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pi4 = AmCharts.makeChart("chart4", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Design", "value": 5.5, "color": "#BA3233" }, { "title": "P&P", "value": 5.5, "color": "#BA3233" }, { "title": "Magazines", "value": 11, "color": "#BA3233" }, { "title": "Outdoor", "value": 3.66, "color": "#BA3233" }, { "title": "Promo", "value": 3.66, "color": "#BA3233" }, { "title": "Endorsement", "value": 3.66, "color": "#BA3233" }, { "title": "Maintenance", "value": 8.25, "color": "#624B6A" }, { "title": "Acquisition", "value": 8.25, "color": "#624B6A" }, { "title": "Raw", "value": 5.5, "color": "#624B6A" }, { "title": "Recycling", "value": 5.5, "color": "#624B6A" }, { "title": "Logistics", "value": 5.5, "color": "#624B6A" }, { "title": "LAB1", "value": 3.3, "color": "#6179C0" }, { "title": "LAB2", "value": 3.3, "color": "#6179C0" }, { "title": "LAB3", "value": 3.3, "color": "#6179C0" }, { "title": "Supply", "value": 3.3, "color": "#6179C0" }, { "title": "Disposal", "value": 3.3, "color": "#6179C0" }, { "title": "Application", "value": 5.5, "color": "#6179C0" }, { "title": "Acquisition", "value": 5.5, "color": "#6179C0" }, { "title": "Settlement", "value": 5.5, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 8, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -27, "labelColor": "#fff", "radius": 190, "innerRadius": 137, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]", "allLabels": [{ "text": "ACME Inc. Spending Chart", "bold": true, "size": 18, "color": "#404040", "x": 0, "align": "center", "y": 20 }] }); var pie5 = AmCharts.makeChart("chart11", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "$", "value": 100, "color": "#090E0F" }], "startDuration": 0, "pullOutRadius": 0, "color": "#fff", "fontSize": 14, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -25, "labelColor": "#fff", "radius": 25, "innerRadius": 0, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); var pie6 = AmCharts.makeChart("chart22", { "type": "pie", "bringToFront": true, "dataProvider": [{ "title": "Marketing", "value": 33, "color": "#BA3233" }, { "title": "Production", "value": 33, "color": "#624B6A" }, { "title": "R&D", "value": 33, "color": "#6179C0" }], "startDuration": 1, "pullOutRadius": 0, "color": "#fff", "fontSize": 9, "titleField": "title", "valueField": "value", "colorField": "color", "labelRadius": -28, "labelColor": "#fff", "radius": 80, "innerRadius": 27, "outlineAlpha": 1, "outlineThickness": 4, "labelText": "[[title]]", "balloonText": "[[title]]: [[value]]" }); 

 #charts, #charts1 { width: 200px; height: 500px; position: relative; margin: 0 auto; font-size: 8px; flex: 1; } #charts { width: 400px; } .chartdiv { width: 400px; height: 500px; position: absolute; top: 0; left: 0; } #parent { display: flex; width: 700px; border: 2px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/pie.js"></script> <div id="parent"> <div id="charts"> <div id="chart1" class="chartdiv"></div> <div id="chart2" class="chartdiv"></div> <div id="chart3" class="chartdiv"></div> <div id="chart4" class="chartdiv"></div> </div> <div id="charts1"> <div id="chart11" class="chartdiv"></div> <div id="chart22" class="chartdiv"></div> <!-- commented out as the mouseover event doesn't fire if there are empty divs overlapping <div id="chart33" class="chartdiv"></div> <div id="chart44" class="chartdiv"></div> --> </div> </div>