高图：当另一个图表上发生点击事件时，如何更改或重绘图表？

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>