javascript - Highcharts:当另一个图表上发生点击事件时，如何更改或重绘一个图表？

Question

我有两个 Highcharts 图表:1. 柱形图和 2. 折线图。

当单击其中一列时，我想更改或重新绘制具有相应标题和数据的折线图；

我有三个用于折线图系列数据的数组:series_a、series_b 和 series_c。单击柱形图的列后，折线图的标题和系列将会更新。

Here is my code on 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);
                       }
                    }
                }
            }
      }

检查您的updated fiddle here

  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>