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

Question

我需要向下钻取SolidGauge - HighCharts。 我无法添加量表的向下钻取。所以，我已经尽力通过调用脚本函数

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

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

而在条形图的功能触发功能加载DIV，

events:{ 
     click: function(){ 
      alert('test'); 
      drawGaugeChart(); 
     } 
    } 

当我写在表上的onload事件函数，图表消失。 我希望计量器先加载，当我们点击它时，应该加载条。 当我们点击条形图时，它应该回到仪表。 或者我们可以重新加载特定的div来加载另一个div。 我有很多图表，所以最好是通过函数调用，而不是在主体中写入'onload'函数。

Answer 1

您需要点击series.point.events中的点击事件，销毁图表并创建新图表（栏）。然后添加单击事件并调用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); 

演示：

• http://jsfiddle.net/nxaLpnLz/