悬停时，多个嵌套的圆环图不显示气球文本 - amcharts

【问题标题】：On hover, multiple nested donut charts not showing balloon text- amcharts悬停时，多个嵌套的圆环图不显示气球文本 - amcharts
【发布时间】：2018-06-21 18:28:00
【问题描述】：

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

参考：Simulating nested donut chart using multiple pie chart instances

“Plugin: Manipulate z-index of the chart”也有。

JSFIDDLE：PROBLEM STATEMENT

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

我在这里没有得到任何有用的数据：Documentation。

如何让所有图表都出现气球？

/**
 * 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>

【问题讨论】：

    标签： javascript jquery amcharts


    【解决方案1】：

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

    var parent = div.parentNode.id;

    当然这会增加一个依赖，容器 div 必须有一个 ID，但这是一个小要求。

    如果其他 div 没有饼图，您还需要删除它们，因为它们会阻止鼠标悬停事件在第二列的图表上触发。

    更新代码如下：

    /**
 * 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>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode