0

我正在amcharts4 animated gauge以角度实现并实现这个amcharts示例

例子

animated gauge我的ts 文件中有这些配置 

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 以便我可以显示仪表刻度值，如 100 200 300 400 500。如何在 amcharts4 动画仪表中设置值间隔？

4

1 回答 1

0

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

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

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

在这里，我创建了一个代码笔来显示行为。

于 2019-03-17T20:12:56.013 回答