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

Question

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

我的 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 动画仪表中设置值间隔？

Answer 1

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

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

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

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

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

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

amcharts

typescript

angular5

amcharts4