如何创建带可变宽度分类轴的径向/雷达图表？

一、amCharts实现可变宽度分类的雷达图 #

原可变半径雷达示例仅调整半径，要实现分类宽度（角度占比）可变，需自定义分类轴每个单元格的起始/结束角度，同时固定Y轴（半径方向）范围为0-2：

• 通过cellStartAngle和cellEndAngle回调函数，为每个分类指定专属角度范围，实现不同宽度占比
• 配置数值轴的min和max属性锁定0-2的取值范围

示例代码片段：

// 创建雷达图表实例
let chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.data = [
  { category: "分类A", value: 1.2, angleWidth: 90 },
  { category: "分类B", value: 1.8, angleWidth: 180 },
  { category: "分类C", value: 0.7, angleWidth: 90 }
];

// 配置Y轴（半径方向）
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 2;
valueAxis.renderer.labels.template.location = 0.5;

// 配置X轴（分类轴，自定义角度宽度）
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;

// 自定义每个分类的起始角度
let currentAngle = 0;
categoryAxis.renderer.cellStartAngle = function(cell) {
  let start = currentAngle;
  currentAngle += cell.dataItem.dataContext.angleWidth;
  return start;
};

// 自定义每个分类的结束角度
categoryAxis.renderer.cellEndAngle = function(cell) {
  return cell.renderer.cellStartAngle(cell) + cell.dataItem.dataContext.angleWidth;
};

// 添加雷达系列
let series = chart.series.push(new am4charts.RadarColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";

二、amCharts旭日图实现红-白实色渐变 #

给旭日图扇区添加红-白渐变，可直接创建渐变对象应用到扇区模板，若需根据数值动态调整渐变程度，可使用适配器：

1. 固定红-白渐变 #

let sunburst = am4core.create("sunburstdiv", am4charts.SunburstChart);
sunburst.data = [/* 你的层级数据 */];

// 创建红-白线性渐变
let gradient = new am4core.LinearGradient();
gradient.addColor("#ff3333", 0); // 起始色：红色
gradient.addColor("#ffffff", 1); // 结束色：白色
gradient.rotation = 0; // 调整渐变方向（0为水平，90为垂直）

// 将渐变应用到所有扇区
sunburst.series.slices.template.fill = gradient;

2. 基于数值的动态渐变 #

若需根据扇区数值调整渐变（数值越大越接近白色）：

let maxValue = 2; // 对应目标数值范围上限

sunburst.series.slices.template.adapter.add("fill", function(fill, target) {
  let value = target.dataItem.value || 0;
  let gradient = new am4core.LinearGradient();
  // 按数值比例分配渐变位置
  gradient.addColor("#ff3333", 0);
  gradient.addColor("#ffffff", value / maxValue);
  return gradient;
});

三、替代图表库建议 #

• Highcharts：极坐标图支持自定义分类角度宽度，通过xAxis的tickPositions或分类角度范围配置实现，文档完善、配置灵活
• D3.js：完全自定义可视化，通过d3.arc绘制不同角度宽度的扇区，半径映射数值，自由度极高，但需具备前端可视化开发能力
• Chart.js：可通过扩展极坐标图插件或自定义绘制逻辑实现可变宽度分类，轻量化，适合简单场景

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