Highcharts实现基于隐藏Total系列的各区域百分比显示需求

Hey there! Let's fix up your Highcharts implementation to meet your two key requirements. Here's a clean, optimized approach that avoids unnecessary series and gives you precise percentage calculations:

Key Changes Explained #

• Remove Total as a Series: Instead of including Total in your series array, store it as a standalone data array. This automatically keeps it out of the legend and chart rendering entirely.
• Custom Tooltip Formatter: Calculate each region's percentage relative to the corresponding Total value directly in the tooltip, ensuring accurate "X: XX.X%" formatting.
• Retain Stacked Area Visual: We'll keep the area stacking for the intended visual effect, but override the default percentage calculation to use your Total data instead of the sum of all regions.

Modified Code #

// Store Total data separately (keeps it out of the chart/legend)
const totalData = [1000, 2000, 3000, 4000, 5000, 6000, 10500];

Highcharts.chart('container', {
  chart: { type: 'area' },
  title: { text: 'Historic and Estimated Worldwide Population Distribution by Region' },
  subtitle: { text: 'Source: Wikipedia.org' },
  xAxis: {
    categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
    tickmarkPlacement: 'on',
    title: { enabled: false }
  },
  yAxis: { title: { text: 'Percent' } },
  tooltip: {
    formatter: function() {
      let tooltipContent = '';
      // Loop through each point to calculate custom percentage
      this.points.forEach(point => {
        const yearTotal = totalData[point.point.index];
        const percentage = (point.y / yearTotal) * 100;
        tooltipContent += `<span style="color:${point.series.color}">${point.series.name}</span>: <b>${percentage.toFixed(1)}%</b><br/>`;
      });
      return tooltipContent;
    },
    split: true
  },
  plotOptions: {
    area: {
      stacking: 'normal', // Shows actual values; percentage is calculated in tooltip
      lineColor: '#ffffff',
      lineWidth: 1,
      marker: { lineWidth: 1, lineColor: '#ffffff' }
    }
  },
  series: [
    { name: 'Asia', data: [502, 635, 809, 947, 1402, 3634, 5268] },
    { name: 'Africa', data: [106, 107, 111, 133, 221, 767, 1766] },
    { name: 'Europe', data: [163, 203, 276, 408, 547, 729, 628] },
    { name: 'America', data: [18, 31, 54, 156, 339, 818, 1201] },
    { name: 'Oceania', data: [2, 2, 2, 6, 13, 30, 46] }
  ]
});

Why This Works #

1. Percentage Accuracy: By referencing the standalone totalData array, each region's percentage is calculated as (region value / total value for that year) * 100—exactly matching your requirement (e.g., Asia's first point shows "Asia: 50.2%").
2. Hidden Total: Since Total isn't part of the series array, it never appears in the legend or on the chart—no need to fuss with visibility settings.
3. Maintainable Code: Separating total data from chart series makes updates to total values simpler down the line.

If you wanted to keep the "100% stacked" visual (where the entire area fills the y-axis), just switch stacking back to 'percent'—the tooltip will still use your custom Total-based calculation. Let me know if you need that variation!

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