javascript - 将实体图深入到 2 系列条形图

Question

我需要添加具有向下钻取功能的 SolidGauge - HighCharts。我无法添加仪表的向下钻取。所以我尝试通过调用脚本函数来加载div

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

<div id="YTDBar" onclick="drawGaugeChart();"></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/