Highcharts: Как изменить или перерисовать диаграмму, когда событие клика происходит на другой диаграмме?

Question

У меня есть две диаграммы с Highcharts: 1. столбчатая диаграмма и 2. линейная диаграмма.

Когда щелкают по одному из столбцов, я хочу изменить или перерисовать линейную диаграмму с соответствующим заголовком иданные;

У меня есть три массива для данных серии линейного графика: series_a, series_b и series_c.Название и серия линейного графика будут обновлены после щелчка по столбцу столбчатого графика.

Вот мой код на JSFiddle

Код выглядит следующим образом:

  var series_a = [{
    name: 'series1',
    data: [22, 20, 18, 3, 4]
  }, {
    name: 'series2',
    data: [10, 30, 10, 13, 14]
  }, {
    name: 'series3',
    data: [12, 10, 10, 9, 2]
  }];

  var series_b = [{
    name: 'series1',
    data: [10, 10, 18, 3, 4]
  }, {
    name: 'series2',
    data: [8, 30, 5, 3, 4]
  }, {
    name: 'series3',
    data: [6, 9, 1, 9, 23]
  }];

  var series_c = [{
    name: 'series1',
    data: [12, 13, 18, 9, 8]
  }, {
    name: 'series2',
    data: [8, 9, 10, 13, 14]
  }, {
    name: 'series3',
    data: [15, 17, 18, 19, 20]
  }];


  Highcharts.chart(chart1, {
    chart: {
      type: 'column'
    },
    title: {
      text: 'chart 1'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      min: 0,
      title: {
        text: undefined
      }
    },
    plotOptions: {
      column: {
        colorByPoint: true,
        pointPadding: 0.05,
        groupPadding: 0.05,
      },
      series: {
        events: {
          click: function(event) {
            // if category 'a' is clicked, chart 2 is changed or redrawn to chart2 with an above array: 'series_a'
            // if category 'b' is clicked, chart 2 is changed or redrawn to chart2 with an above array: 'series_b'
            // if category 'c' is clicked, chart 2 is changed or redrawn to chart2 with an above array: 'series_c'
          }
        }
      }
    },
    series: [{
      name: 'series1',
      data: [
        ['a', 24.2],
        ['b', 20.8],
        ['c', 14.9]
      ]
    }]
  });

  Highcharts.chart('chart2', {
    chart: {
      type: 'line'
    },
    title: {
      text: 'chart2 - data a'
    },
    xAxis: {
      categories: ['3/1', '3/2', '3/3', '3/4', '3/5']
    },
    series: series_a
  });

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="chart1" style="width: 400px;"></div>
<div id="chart2" style="width: 400px;"></div>

Answer 1

используйте это событие ниже для клика

series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {                       
                       if(this.category == 0){
                            secChart(series_a);
                       }
                       else if(this.category == 1){
                            secChart(series_b);
                       }
                       else if(this.category == 2){
                            secChart(series_c);
                       }
                    }
                }
            }
      }

проверьте обновленную скрипку здесь

  var series_a = [{
    name: 'series1',
    data: [22, 20, 18, 3, 4]
  }, {
    name: 'series2',
    data: [10, 30, 10, 13, 14]
  }, {
    name: 'series3',
    data: [12, 10, 10, 9, 2]
  }];

  var series_b = [{
    name: 'series1',
    data: [10, 10, 18, 3, 4]
  }, {
    name: 'series2',
    data: [8, 30, 5, 3, 4]
  }, {
    name: 'series3',
    data: [6, 9, 1, 9, 23]
  }];

  var series_c = [{
    name: 'series1',
    data: [12, 13, 18, 9, 8]
  }, {
    name: 'series2',
    data: [8, 9, 10, 13, 14]
  }, {
    name: 'series3',
    data: [15, 17, 18, 19, 20]
  }];


  Highcharts.chart(chart1, {
    chart: {
      type: 'column'
    },
    title: {
      text: 'chart 1'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      min: 0,
      title: {
        text: undefined
      }
    },
    plotOptions: {
      column: {
        colorByPoint: true,
        pointPadding: 0.05,
        groupPadding: 0.05,
      },
      series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {                       
                       if(this.category == 0){
                       		secChart(series_a);
                       }
                       else if(this.category == 1){
                       		secChart(series_b);
                       }
                       else if(this.category == 2){
                       		secChart(series_c);
                       }
                    }
                }
            }
      }
    },
    series: [{
      name: 'series1',
      data: [
        ['a', 24.2],
        ['b', 20.8],
        ['c', 14.9]
      ]
    }]
  });

function secChart(data){
  Highcharts.chart('chart2', {
    chart: {
      type: 'line'
    },
    title: {
      text: 'chart2 - data a'
    },
    xAxis: {
      categories: ['3/1', '3/2', '3/3', '3/4', '3/5']
    },
    series: data
  });
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="chart1" style="width: 400px;"></div>
<div id="chart2" style="width: 400px;"></div>