Есть ли способ установить интервал значений анимированного датчика Amcharts4? - PullRequest
Новая
       38

Есть ли способ установить интервал значений анимированного датчика Amcharts4?

0 голосов
/ 17 марта 2019

Я реализую 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?

1 Ответ

0 голосов
/ 17 марта 2019

Чтобы установить начальное и конечное значение оси, вы можете использовать axis.min и axis.max: 

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

Для отображения только значенийВы хотите, чтобы на оси вы могли использовать axis.renderer.minGridDistance.

Здесь Я создал кодовое перо, чтобы показать поведение.

...