有没有办法设置 Amcharts4 动画仪表的值间隔?

Is there any way to set value interval of Amcharts4 animate gauge?

我正在 angular 中实现 amcharts4 animated gauge 并实现这个 amcharts 示例

example

我的 ts 文件

中有 animated gauge 这些配置
var chart = am4core.create("chartdiv", am4charts.GaugeChart);
chart.innerRadius = am4core.percent(82);

/**
 * Normal axis
 */

var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
axis.renderer.radius = am4core.percent(80);
axis.renderer.inside = true;
axis.renderer.line.strokeOpacity = 1;
axis.renderer.ticks.template.strokeOpacity = 1;
axis.renderer.ticks.template.length = 10;
axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.radius = 40;
axis.renderer.labels.template.adapter.add("text", function (text) {
  return text;
})

/**
 * Axis for ranges
 */

var colorSet = new am4core.ColorSet();

var axis2 = chart.xAxes.push(new am4charts.ValueAxis());
axis2.min = 0;
axis2.max = 100;
axis2.renderer.innerRadius = 10
axis2.strictMinMax = true;
axis2.renderer.labels.template.disabled = true;
axis2.renderer.ticks.template.disabled = true;
axis2.renderer.grid.template.disabled = true;

var range0 = axis2.axisRanges.create();
range0.value = 0;
range0.endValue = 50;
range0.axisFill.fillOpacity = 1;
range0.axisFill.fill = colorSet.getIndex(0);

var range1 = axis2.axisRanges.create();
range1.value = 50;
range1.endValue = 100;
range1.axisFill.fillOpacity = 1;
range1.axisFill.fill = colorSet.getIndex(2);

/**
 * Label
 */

this.gaugaeLabel = chart.radarContainer.createChild(am4core.Label);
this.gaugaeLabel.isMeasured = false;
this.gaugaeLabel.fontSize = 12;
this.gaugaeLabel.x = am4core.percent(50);
this.gaugaeLabel.y = am4core.percent(100);
this.gaugaeLabel.horizontalCenter = "middle";
this.gaugaeLabel.verticalCenter = "bottom";
this.gaugaeLabel.text = "0";


/**
 * Hand
 */

this.gaugaeHand = chart.hands.push(new am4charts.ClockHand());
this.gaugaeHand.axis = axis2;
this.gaugaeHand.innerRadius = am4core.percent(20);
this.gaugaeHand.startWidth = 10;
this.gaugaeHand.pin.disabled = true;
this.gaugaeHand.value = 0;

this.gaugaeHand.events.on("propertychanged", function (ev) {
  range0.endValue = ev.target.value;
  range1.value = ev.target.value;
  axis2.invalidate();
});

在此示例中,gauge 的刻度从 0 开始,到 100 结束。刻度值之间的值间隔为 10,如刻度值从零开始显示为 10 20 30 40 50 60 ... 100。但是我想要起始值 100 和结束值 500 以及值间隔 100,以便我可以显示仪表刻度值,如 100 200 300 400 500。如何在 amcharts4 动画仪表中设置值间隔?

要设置轴的起始值和结束值,您可以使用 axis.min and axis.max:

axis.min = 100;
axis.max = 500;

要在轴上仅显示您想要的值,您可以使用 axis.renderer.minGridDistance

Here 我创建了一个代码笔来显示行为。