Возможен ли пользовательский масштаб оси? - PullRequest
Новая
       4

Возможен ли пользовательский масштаб оси?

1 голос
/ 02 июля 2019

Можно ли установить собственную шкалу для числовых результатов?

Мне нужно установить шкалы с этими значениями 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000

1 Ответ

1 голос
/ 02 июля 2019

AmCharts v4 не позволяет напрямую влиять на масштаб за пределами настройки minGridDistance на оси. Обходной путь для этого состоит в том, чтобы отключить собственные сгенерированные метки оси и создать свои собственные, используя диапазоны осей . Вы также можете установить свои собственные минимальные / максимальные значения на оси. 

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = <your min value>;

range = valueAxis.axisRanges.create();
range.value = <axis value>;
range.endValue = range.value;
range.label.text = range.value; 
// ... repeat for each axis increment

valueAxis.max = <your max value>;

Вот базовая демонстрация: 

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "value2": 362,
  "value3": 699
}, {
  "date": new Date(2018, 0, 2),
  "value": 269,
  "value2": 450,
  "value3": 841
}, {
  "date": new Date(2018, 0, 3),
  "value": 700,
  "value2": 358,
  "value3": 699
}, {
  "date": new Date(2018, 0, 4),
  "value": 490,
  "value2": 367,
  "value3": 500
}, {
  "date": new Date(2018, 0, 5),
  "value": 500,
  "value2": 485,
  "value3": 369
}, {
  "date": new Date(2018, 0, 6),
  "value": 550,
  "value2": 354,
  "value3": 250
}, {
  "date": new Date(2018, 0, 7),
  "value": 420,
  "value2": 350,
  "value3": 600
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.renderer.grid.template.location = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = 0;

var rangeValue = 50;

for (var i = 0; i < 8; ++i) {
  range = valueAxis.axisRanges.create();
  range.value = (rangeValue += ((i + 2) * 25));
  range.endValue = range.value;
  range.label.text = range.value; 
}

valueAxis.max = rangeValue;

// Create series
function createSeries(field, name) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.name = name;
  series.tooltipText = "{dateX}: [b]{valueY}[/]";
  series.strokeWidth = 2;
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color("#fff");
  bullet.circle.strokeWidth = 2;
}

createSeries("value", "Series #1");
createSeries("value2", "Series #2");
createSeries("value3", "Series #3");

chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width:100%; height: 500px;"></div>
...