Highcharts图表：如何仅让占比<5%的数据标签垂直显示？

Absolutely doable! You can dynamically adjust the data label rotation based on each point's percentage of the total series value. Here's how to implement this for both the initial chart and drilldown levels:

1. Dynamic Calculation with Chart Events #

This approach works for both static and dynamic data, and handles drilldowns automatically:

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      // Handle initial chart load
      load: function() {
        this.updateSeriesDataLabels(this.series);
      },
      // Handle post-drilldown updates
      drilldown: function() {
        const chart = this;
        // Wait a moment for the drilldown series to render
        setTimeout(() => {
          const drilldownSeries = chart.series.filter(s => !s.drilldown);
          chart.updateSeriesDataLabels(drilldownSeries);
        }, 100);
      }
    },
    // Helper function to update data labels
    updateSeriesDataLabels: function(seriesList) {
      seriesList.forEach(series => {
        // Calculate total value of the series
        const totalValue = series.data.reduce((sum, point) => sum + point.y, 0);
        
        series.data.forEach(point => {
          const percentage = (point.y / totalValue) * 100;
          // Set rotation to 90 if <5%, else use default 0
          point.update({
            dataLabels: {
              rotation: percentage < 5 ? 90 : 0
            }
          }, false); // Disable immediate redraw for performance
        });
      });
      this.redraw(); // Redraw once all updates are done
    }
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        // Default rotation for points that don't need vertical alignment
        rotation: 0
      }
    }
  },
  // Add your existing series and drilldown configuration here
  series: [{
    name: 'Browsers',
    data: [
      { name: 'Chrome', y: 61.41, drilldown: 'chrome' },
      { name: 'Internet Explorer', y: 11.84, drilldown: 'internet-explorer' },
      { name: 'Firefox', y: 10.85, drilldown: 'firefox' },
      { name: 'Edge', y: 4.67 },
      { name: 'Safari', y: 4.18, drilldown: 'safari' },
      { name: 'Sogou Explorer', y: 1.64 },
      { name: 'Opera', y: 1.6 },
      { name: 'QQ', y: 1.2 },
      { name: 'Other', y: 2.61 }
    ]
  }],
  drilldown: {
    series: [
      // Add your drilldown series data here
      {
        id: 'chrome',
        data: [
          ['v65.0', 0.1],
          ['v64.0', 1.3],
          ['v63.0', 5.3],
          ['v62.0', 0.5],
          ['v61.0', 1.7],
          ['v60.0', 0.8],
          ['v59.0', 2.1],
          ['v58.0', 0.3],
          ['v57.0', 0.4],
          ['v56.0', 0.5],
          ['v55.0', 1.2],
          ['v54.0', 0.8],
          ['v53.0', 0.5],
          ['v52.0', 0.6],
          ['v51.0', 0.3],
          ['v50.0', 0.7],
          ['v49.0', 0.1],
          ['v48.0', 0.1],
          ['v47.0', 0.1],
          ['v43.0', 0.1],
          ['v29.0', 0.1]
        ]
      }
      // Include other drilldown series as needed
    ]
  }
});

How This Works: #

• Load Event: Runs when the initial chart renders, calculating percentages for each point and setting rotation accordingly.
• Drilldown Event: Triggers after a drilldown, waiting briefly for the new series to load before applying the same percentage check and rotation logic.
• Helper Function: Keeps the code DRY by reusing the logic for both initial and drilldown series.

2. Static Configuration (For Fixed Data) #

If your data is static and you know the percentages upfront, you can set the rotation directly in the data points:

series: [{
  name: 'Browsers',
  data: [
    { name: 'Chrome', y: 61.41, dataLabels: { rotation: 0 } },
    { name: 'Internet Explorer', y: 11.84, dataLabels: { rotation: 0 } },
    { name: 'Firefox', y: 10.85, dataLabels: { rotation: 0 } },
    { name: 'Edge', y: 4.67, dataLabels: { rotation: 90 } },
    { name: 'Safari', y: 4.18, dataLabels: { rotation: 90 } },
    // ... other points
  ]
}]

This is simpler but less flexible if your data changes frequently.

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