javascript - 单击单个图例项的变量数据的多个饼图

Question

我有一个场景，在一个“图表”中最多可以有 6 个不同的饼图。我们想要的是允许用户单击图例项并使其影响包含该项的所有饼图。某些图表可能只有一个具有任意值的切片，但全部共享相同的基本类别集。使用此answer中完成的工作我能够对两个饼图执行此操作。但除此之外，我只能得到一个切片隐藏/显示的馅饼。

这是执行 legendGroup(或 legendItem - 我都尝试过)的代码部分:

var newChart = new Highcharts.Chart(options, function(chart) {
  $(chart.series[0].data).each(function(i, e) {
    console.log(chart.series[0].data);
    e.legendGroup.on('click', function(event) {
      var legendItem = e.name;
      console.log(legendItem);
      event.stopPropagation();

      $(chart.series).each(function(j, f) {
        $(this.data).each(function(k, z) {
          if (z.name == legendItem) {
            if (z.visible) {
              z.setVisible(false);
            } else {
              z.setVisible(true);
            }
          }
        });
      });
    });
  });
});

如您所见，console.log(legendItem); 没有出现。看起来更新的点击事件没有被捕获。

如何使这个图例单击隐藏/显示该项目的所有饼图中的切片？当您将鼠标悬停在图例项上时，如何在饼图中允许悬停效果的奖励。

完整jsFiddle代码:

var options = {
  chart: {
    type: 'pie',
    renderTo: 'container',
    width: null,
    height: 800,
    events: {
      load: function() {
        var chart = this;
        var currWidth = chart.chartWidth;
        var currHeight = chart.chartHeight;
        var seriesList = chart.series;
        var seriesCount = seriesList.length;
        var piesize = CalcSize(currWidth, currHeight, seriesCount);
        var numCols;
        var numRows;
        var locArray = [];

        if (seriesCount == 6) {
          numCols = 2;
          numRows = 3;
          for (nR = 0; nR < numRows; nR++) {
            for (nC = 0; nC < numCols; nC++) {
              if (locArray.length <= seriesCount - 1) {
                locArray.push([((piesize / 2) + (piesize * nC)) + 60, (piesize / 2) + (piesize * nR)])
              }
            }
          }
        } else {
          numCols = currWidth / piesize;
          numRows = Math.floor(currHeight / piesize);
          for (nR = 0; nR < numRows; nR++) {
            for (nC = 0; nC < numCols; nC++) {
              if (locArray.length <= seriesCount - 1) {
                locArray.push([(piesize / 2) + (piesize * nC), ((piesize / 2) + (piesize * nR)) - 75])
              }
            }
          }
        }

        locArray.sort();

        $(seriesList).each(function(j) {
          seriesList[j].update({
            size: piesize,
            center: locArray[j]
          })
        });

        //console.log(currWidth);
        //console.log(currHeight);
        //console.log(seriesCount);
        //console.log(piesize);
        //console.log(numCols);
        //console.log(numRows);
        //console.log(locArray);
        //console.log(seriesList);
      },
      resize: function() {
        var chart = this;
        $(seriesList).each(function(j) {
          seriesList[j].update({
            center: [chart.series[0].data[1].plotX - 20, chart.series[0].data[1].plotY - 65]
          })
        });
      }
    }
  },
  title: {
    text: null
  },
  xAxis: {
    categories: ['Not Specified', 'Entry Level', 'Less than 1 year', '1 Year to 2 Years', '2 Years to 5 Years', '5 Years to 10 Years', 'More than 10 Years'],
    labels: {
      style: {}
    }
  },
  series: [{
    name: 'Chattanooga, TN-GA MSA',
    visible: true,
    showInLegend: true,
    dataLabels: {
      enabled: false
    },
    tooltip: {
      valueDecimals: null,
      valuePrefix: null,
      valueSuffix: null
    },
    data: [
      ['Not Specified', 12],
      ['Entry Level', 1],
      ['Less than 1 year', 0],
      ['1 Year to 2 Years', 0],
      ['2 Years to 5 Years', 4],
      ['5 Years to 10 Years', 1],
      ['More than 10 Years', 0]
    ]
  }, {
    name: 'Jackson, TN MSA',
    visible: true,
    showInLegend: false,
    dataLabels: {
      enabled: false
    },
    tooltip: {
      valueDecimals: null,
      valuePrefix: null,
      valueSuffix: null
    },
    data: [
      ['Not Specified', 1],
      ['Entry Level', 0],
      ['Less than 1 year', 0],
      ['1 Year to 2 Years', 0],
      ['2 Years to 5 Years', 2],
      ['5 Years to 10 Years', 0],
      ['More than 10 Years', 0]
    ]
  }, {
    name: 'Kingsport-Bristol-Bristol, TN-VA MSA',
    visible: true,
    showInLegend: false,
    dataLabels: {
      enabled: false
    },
    tooltip: {
      valueDecimals: null,
      valuePrefix: null,
      valueSuffix: null
    },
    data: [
      ['Not Specified', 0],
      ['Entry Level', 0],
      ['Less than 1 year', 0],
      ['1 Year to 2 Years', 1],
      ['2 Years to 5 Years', 2],
      ['5 Years to 10 Years', 0],
      ['More than 10 Years', 0]
    ]
  }, {
    name: 'Knoxville, TN MSA',
    visible: true,
    showInLegend: false,
    dataLabels: {
      enabled: false
    },
    tooltip: {
      valueDecimals: null,
      valuePrefix: null,
      valueSuffix: null
    },
    data: [
      ['Not Specified', 27],
      ['Entry Level', 2],
      ['Less than 1 year', 0],
      ['1 Year to 2 Years', 1],
      ['2 Years to 5 Years', 4],
      ['5 Years to 10 Years', 0],
      ['More than 10 Years', 0]
    ]
  }, {
    name: 'Memphis, TN-MS-AR MSA',
    visible: true,
    showInLegend: false,
    dataLabels: {
      enabled: false
    },
    tooltip: {
      valueDecimals: null,
      valuePrefix: null,
      valueSuffix: null
    },
    data: [
      ['Not Specified', 45],
      ['Entry Level', 18],
      ['Less than 1 year', 0],
      ['1 Year to 2 Years', 14],
      ['2 Years to 5 Years', 31],
      ['5 Years to 10 Years', 2],
      ['More than 10 Years', 0]
    ]
  }, {
    name: 'Nashville-Davidson--Murfreesboro, TN MSA',
    visible: true,
    showInLegend: false,
    dataLabels: {
      enabled: false
    },
    tooltip: {
      valueDecimals: null,
      valuePrefix: null,
      valueSuffix: null
    },
    data: [
      ['Not Specified', 176],
      ['Entry Level', 10],
      ['Less than 1 year', 0],
      ['1 Year to 2 Years', 16],
      ['2 Years to 5 Years', 31],
      ['5 Years to 10 Years', 3],
      ['More than 10 Years', 0]
    ]
  }],
  tooltip: {
    useHTML: false,
    hideDelay: 75,
    valuePrefix: null,
    valueSuffix: null
  },
  subtitle: {
    text: null
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      borderWidth: 0,
      dataLabels: {
        enabled: false
      }
    }
  }
};

function CalcSize(width, height, numberCharts) {
  var number = numberCharts; // Example-Number
  var width = width;
  var height = height;
  var area = height * width;
  var elementArea = parseInt(area / number);

  // Calculate side length if there is no "spill":
  var sideLength = parseInt(Math.sqrt(elementArea));

  // We now need to fit the squares. Let's reduce the square size 
  // so an integer number fits the width.
  var numX = Math.ceil(width / sideLength);
  sideLength = width / numX;
  while (numX <= number) {
    // With a bit of luck, we are done.
    if (Math.floor(height / sideLength) * numX >= number) {
      // They all fit! We are done!
      return sideLength;
    }
    // They don't fit. Make room for one more square i each row.
    numX++;
    sideLength = width / numX;
  }
  // Still doesn't fit? The window must be very wide
  // and low.
  sideLength = height;
  return sideLength;
}

var newChart = new Highcharts.Chart(options, function(chart) {
  $(chart.series[0].data).each(function(i, e) {
    console.log(chart.series[0].data);
    e.legendGroup.on('click', function(event) {
      var legendItem = e.name;
      console.log(legendItem);
      event.stopPropagation();

      $(chart.series).each(function(j, f) {
        $(this.data).each(function(k, z) {
          if (z.name == legendItem) {
            if (z.visible) {
              z.setVisible(false);
            } else {
              z.setVisible(true);
            }
          }
        });
      });
    });
  });
});

Answer 1

出于某种原因(可能是错误)legendItemClick 不会针对饼图系列触发(这将是处理此自定义行为的适当位置)。

作为解决方法，我覆盖了核心函数Highcharts.Legend.prototype.setItemEvents并在那里实现了所需的功能:https://jsfiddle.net/kkulig/236gpt4s/

    // custom code - handle categories        
    item.series.chart.series.forEach(function(s) {
        s.points.forEach(function(p) {
        if(p.name === item.name) {
            p.setVisible();
        }
      });
    });