Javascript 向下钻取solidgauge图表至2系列条形图

我需要添加SolidGauge-HighCharts和深入分析。 我无法为仪表添加向下钻取。因此，我尝试通过调用script函数来加载div

<div id="YTDSolidGauge" onload="drawGaugeChart();" onclick="drawBarChart(this);" ></div>

<div id="YTDBar" onclick="drawGaugeChart();"></div> 

当我在仪表中写入onload函数时，图表消失了。 我希望首先加载量规，当我们单击它时，应加载杆。 当我们点击条形图时，它应该回到仪表上。 或者我们可以重新加载特定的div来加载另一个div。

---

我有很多图表，所以最好是按函数调用，而不是在正文中编写“onload”函数。

您需要捕获图表中的单击事件，销毁图表并创建新的图表（条形图）。然后添加并单击事件并调用destroy/init

var barOptions,
        solidOptions;

barOptions = {
    chart:{
    type: 'bar'
  },
  series:[{
    data:[1,2,3]
  }],
  plotOptions: {
    series: {
      point: {
        events: {
          click: function() {
            var chart = this.series.chart;

            chart.destroy();

            Highcharts.chart('container', solidOptions);
          }
        }
      }
    }
  },

}

solidOptions = {
 chart: {
    type: 'solidgauge'
  },
  legend: {
    enabled: false
  },
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  plotOptions: {
    series: {
      point: {
        events: {
          click: function() {
            var chart = this.series.chart;

            chart.destroy();

            Highcharts.chart('container', barOptions);
          }
        }
      }
    }
  },

  tooltip: {
    enabled: false
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33,
    }]
  }]
};


Highcharts.chart('container', solidOptions);

演示：

---

您需要捕获图表中的点击事件，销毁图表并创建新的图表（条形图）。然后添加并单击事件并调用destroy/init

var barOptions,
        solidOptions;

barOptions = {
    chart:{
    type: 'bar'
  },
  series:[{
    data:[1,2,3]
  }],
  plotOptions: {
    series: {
      point: {
        events: {
          click: function() {
            var chart = this.series.chart;

            chart.destroy();

            Highcharts.chart('container', solidOptions);
          }
        }
      }
    }
  },

}

solidOptions = {
 chart: {
    type: 'solidgauge'
  },
  legend: {
    enabled: false
  },
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  plotOptions: {
    series: {
      point: {
        events: {
          click: function() {
            var chart = this.series.chart;

            chart.destroy();

            Highcharts.chart('container', barOptions);
          }
        }
      }
    }
  },

  tooltip: {
    enabled: false
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33,
    }]
  }]
};


Highcharts.chart('container', solidOptions);

演示：