如何使用AmCharts 4基于XYChart实现线性仪表盘功能

AmCharts 4 完全可以基于XYChart实现你要的线性仪表盘效果，你之前的写法是混用了v3版本的API，几个核心错误要先修正：

• v4 版本不存在addGraph()方法，所有图表系列需要push到chart.series集合中，不能直接实例化XYChart当图形元素、也不能用createChild()添加系列
• v4 直接通过chart.data赋值数据源，没有dataProvider属性
• 柱形样式、填充效果需要配置在系列的columns.template属性模板上，不支持v3的直接传配置项的写法

具体实现逻辑 #

1. 初始化基础XYChart实例，不需要强制开启rotate属性，直接把分类轴放在Y轴、值轴放在X轴即可实现水平条形效果
2. 配置轴参数：Y轴分类轴仅保留1个分类，隐藏多余轴线、网格做单条仪表的承载；X轴值轴设置0-100的固定范围，按需配置刻度样式
3. 添加堆叠柱形系列，每个颜色分段对应一个系列，开启堆叠凑成完整的仪表色带
4. 添加指针元素和数值标签，通过子弹元素（Bullet）挂载在目标值的位置即可

可运行参考代码 #

// 初始化图表
const chart = am4core.create(chartDiv.current, am4charts.XYChart);
// 数据源：分段占比+当前仪表值
chart.data = [{
  category: "score",
  bad: 30,
  satisfactory: 40,
  good: 30,
  current: 72 // 当前指针指向的值
}];

// Y轴：分类轴，仅承载单条仪表
const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.disabled = true;
categoryAxis.renderer.axisFills.template.disabled = true;
categoryAxis.cursorTooltipEnabled = false;

// X轴：值轴，对应仪表0-100的刻度范围
const valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#666");
valueAxis.strictMinMax = true;

// 通用柱形配置方法，减少重复代码
function createRangeSeries(field, color) {
  const series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueX = field;
  series.dataFields.categoryY = "category";
  series.stacked = true; // 开启堆叠
  // 配置柱形样式
  series.columns.template.fill = am4core.color(color);
  series.columns.template.strokeOpacity = 0;
  series.columns.template.height = am4core.percent(100);
  // 给首尾分段加圆角
  if (field === 'bad') {
    series.columns.template.column.cornerRadiusLeft = 20;
  }
  if (field === 'good') {
    series.columns.template.column.cornerRadiusRight = 20;
  }
  return series;
}
// 添加三个颜色分段
createRangeSeries("bad", "#d05c4f");
createRangeSeries("satisfactory", "#f6c344");
createRangeSeries("good", "#53b269");

// 添加指针
const pointerSeries = chart.series.push(new am4charts.ColumnSeries());
pointerSeries.dataFields.valueX = "current";
pointerSeries.dataFields.categoryY = "category";
pointerSeries.columns.template.fill = am4core.color("#222");
pointerSeries.columns.template.strokeOpacity = 0;
pointerSeries.columns.template.width = 4;
pointerSeries.columns.template.height = am4core.percent(140); // 指针比色条高一点
// 给指针加顶部三角
const bullet = pointerSeries.bullets.push(new am4charts.Bullet());
const triangle = bullet.createChild(am4core.Triangle);
triangle.width = 12;
triangle.height = 10;
triangle.horizontalCenter = "middle";
triangle.verticalCenter = "bottom";
triangle.fill = am4core.color("#222");
triangle.dy = -1;
// 添加当前值标签
const label = bullet.createChild(am4core.Label);
label.text = "{valueX}";
label.verticalCenter = "bottom";
label.dy = -15;
label.horizontalCenter = "middle";
label.fontSize = 14;
label.fontWeight = "bold";

如果需要垂直方向的线性仪表盘，只需要把X/Y轴的配置互换，开启chart.rotate = true即可，分段和指针的配置逻辑完全一致。

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