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

时间：2018-06-21 18:28:00

标签： javascript jquery amcharts

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

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

“插件：操纵图表的z-index” 。

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>

1 个答案:

答案 0 :(得分：1)

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

write.table(results, row.names = text, file = "mydata.csv", sep = ",")

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

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

下面的更新代码：

var parent = div.parentNode.id;

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

相关问题
最新问题