Question

我需要添加SolidGauge - HighCharts with drilldown。我无法为仪表添加钻取。所以我试图通过调用脚本函数来加载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中捕获点击事件，销毁图表并创建新图表（栏）。然后添加click事件并调用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/

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

1 个答案: