Apex Charts环形图设置最小扇区大小问题求助

当环形图数据值差距过大时（例如示例中的30、5与300、400等数值），小数值对应的扇区会因占比过低几乎不可见。要实现将数值≤50的扇区绘图尺寸强制设为50，但保留原始数据显示的需求，可按以下方式修改代码：

核心思路 #

• 准备两组数据：一组是修正后的数据（用于绘制图表，将≤50的值替换为50），另一组保留原始数据（用于tooltip、图例等场景的真实值展示）
• 通过自定义tooltip内容，确保鼠标悬浮时显示原始数据而非修正后的数据

修改后的完整代码 #

// 原始数据，保留用于显示
const originalSeries = [30, 5, 300, 400, 500, 600];
// 生成修正后的绘图数据，将≤50的值替换为50
const adjustedSeries = originalSeries.map(value => value <= 50 ? 50 : value);

var optionsDonutChart = {
  series: adjustedSeries, // 使用修正后的数据绘图
  chart: {
    width: 450,
    type: 'donut',
  },
  dataLabels: {
    enabled: false,
  },
  plotOptions: {
    pie: {
      donut: {
        size: '50%',
      },
    },
  },
  stroke: {
    width: 10,
  },
  labels: ['Expired', 'Revoked', 'Expiring Soon', 'Issued', 'Draft', 'Not Started'],
  colors: ['#A82200', '#A82200', '#A82200', '#005835', '#2D77BE', '#2D77BE'],
  tooltip: {
    // 自定义tooltip内容，显示原始数据
    formatter: function(val, opts) {
      return `${opts.w.globals.labels[opts.seriesIndex]}: ${originalSeries[opts.seriesIndex]}`;
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
    }
  }]
};

var chart = new ApexCharts(document.querySelector("#donutChart"), optionsDonutChart);
chart.render();

关键说明 #

1. 数据分离：通过originalSeries存储真实数据，adjustedSeries生成绘图用的修正数据，确保图表绘制时小数值扇区有足够的显示空间
2. Tooltip自定义：利用tooltip.formatter回调函数，从originalSeries中获取对应索引的原始值，保证用户看到的是真实数据
3. 冗余逻辑移除：原代码中判断是否有小数值后修改donut尺寸的逻辑可直接移除，修正数据后小扇区已被放大，无需额外调整环形大小

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