Question

我正在按角度实现amcharts4 animated gauge并实现此示例性的弹道

我的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();
});

在此示例中，量表的刻度从0开始，以100结束。刻度值之间的值间隔为10，例如刻度值从零开始并显示为10 20 30 40 50 60 ...100。但是我想要起始值100，结束值500和值间隔100，这样我就可以显示标尺比例值，例如100200300400500。如何在amcharts4动画量规中设置值间隔？

Answer 1

要设置轴的起点和终点，可以使用axis.min和axis.max：

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

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

Here我创建了一支数字笔来显示行为。

有什么方法可以设置Amcharts4动画量规的值间隔？

1 个答案: