По нажатию кнопки визуализируйте все круговые диаграммы в верхних диаграммах в другом элементе.

Question

Я могу сделать это для одного пирога, когда пользователь нажимает на сам пирог.

Я делаю это с помощью

1. прослушивания события щелчка на круговой диаграмме

2. получить выбранный объект пирога

3. преобразовать объект в требуемый json и отобразить его в другом div

Я хочу, чтобы все круговые диаграммы круговой диаграммы отображались в разных элементах div при нажатии кнопки

Answer 1

Вы можете сохранить параметры диаграммы в переменной и использовать их для отображения нового графика в событии клика:

var chartOptions = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares in January, 2018'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  series: [{
    events: {
      click: function(){
        this.chart.destroy();
        Highcharts.chart('container2', chartOptions);
      }
    },
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Sogou Explorer',
      y: 1.64
    }, {
      name: 'Opera',
      y: 1.6
    }, {
      name: 'QQ',
      y: 1.2
    }, {
      name: 'Other',
      y: 2.61
    }]
  }]
}

Highcharts.chart('container', chartOptions);

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/sndcrtqe/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Chart#destroy