请求协助：Highcharts Solidgauge钻取切换至Bar Chart功能异常

Hey there! I see you're trying to build a drilldown feature where clicking a solid gauge sector switches to a bar chart, but right now only a tiny piece of the gauge shows up instead of the bar chart. Let's fix that together.

The core issue here is that Highcharts' built-in drilldown module is designed for same-type chart drilldowns. Switching between a solid gauge (a polar chart type) and a bar chart (a cartesian type) requires manually destroying the existing chart instance and initializing a new one with the correct type, rather than relying on the default drilldown setup.

Here's how to adjust your code to make this work:

Step 1: Refactor Chart Initialization into a Reusable Function #

First, create a function that can initialize either chart type based on parameters. This makes switching between them straightforward.

Step 2: Handle Gauge Click to Trigger Chart Switch #

Add a click event handler to the solid gauge's series that destroys the current chart and initializes the bar chart with your drilldown data.

Full Modified Code #

<div id="container"></div>
<style>
#container { margin: 0 auto; max-width: 400px; min-width: 380px; height: 400px; }
</style>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script>
// Reusable chart initialization function
function initChart(type, data) {
  // Destroy existing chart if it exists
  if (Highcharts.charts.length > 0) {
    Highcharts.charts[0].destroy();
  }

  const chartConfig = {
    chart: {
      renderTo: 'container',
      type: type,
      height: 400
    },
    title: {
      text: type === 'solidgauge' ? 'Solid Gauge' : 'Bar Chart Drilldown'
    },
    series: data
  };

  // Add gauge-specific config if needed
  if (type === 'solidgauge') {
    chartConfig.tooltip = {
      valueSuffix: '%'
    };
    chartConfig.pane = {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    };
    chartConfig.yAxis = {
      min: 0,
      max: 100,
      stops: [
        [0.1, '#55BF3B'],
        [0.5, '#DDDF0D'],
        [0.9, '#DF5353']
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    };
    // Add click handler to gauge series
    chartConfig.series[0].point = {
      events: {
        click: function() {
          // Initialize bar chart on click
          initChart('bar', [{
            name: 'Drilldown Data',
            data: [
              ['Category 1', 40],
              ['Category 2', 60],
              ['Category 3', 80]
            ]
          }]);
        }
      }
    };
  }

  // Initialize the new chart
  new Highcharts.Chart(chartConfig);
}

// Start with the solid gauge
initChart('solidgauge', [{
  name: 'Gauge',
  data: [65],
  dataLabels: {
    format: '<div style="text-align:center"><span style="font-size:25px">{y}%</span><br/>' +
            '<span style="font-size:12px;opacity:0.4">Click to Drilldown</span></div>'
  }
}]);
</script>

Key Changes Explained #

• Reusable Initialization: The initChart function handles both chart types, destroying any existing chart first to avoid conflicts between polar and cartesian chart rendering.
• Manual Drilldown Trigger: Instead of using Highcharts' drilldown module, we use a click event on the gauge point to switch chart types directly—this bypasses the module's same-type limitation.
• Type-Specific Config: We add gauge-specific settings (like pane, y-axis styling) only when initializing the solid gauge, ensuring the bar chart uses its default cartesian setup without leftover polar chart properties.

This approach ensures that clicking the gauge properly replaces it with a full bar chart instead of the partial gauge you were seeing before.

内容的提问来源于stack exchange，提问作者Marcia Zavaleta