向下鑽取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/