Есть ли способ изменить метки оси?

Question

Я обновляю некоторый код в моей работе и попал в проблему, на amcharts3, метки оси x не являются тем, к чему привязаны данные. Подобно тому, как данные диаграммы привязаны к дате, но показывают другое значение (значение в наборе данных) в метках, и не нашли способ сделать это на amcharts4.

Я попытался создать еще одну ось х, но тогда данные выглядят неправильно.

Это должна быть ось оси, показывающая значение, которое находится в наборе данных, но просто показывающее, что ось должна быть связана с другим значением в наборе данных. если это имеет смысл.

Answer 1

Вот пример amCharts v3, который использует labelFunction чтобы, как вы говорите, связать данные с тем, что записывается на оси (любезно предоставлено xorspark):

https://codepen.io/team/amcharts/pen/74df55e029228d9a1867b65f351ca48f

Для v4 вы бы использовали адаптер на AxisLabel, Сложность использования ярлыков AxAisis Axis заключается в том, что их dataItem не привязан к исходному графику или серии DataItem чтобы дать вам доступ к остальным данным (например, через dataItem.dataContext["field name here"]). Так как адаптер пытается обеспечить text к его DateAxis AxisLabelесли этот ярлык имеет Dateвам придется сравнить сказанное AxisLabel для каждого из ваших объектов данных, чтобы увидеть, если его Date и дата ваших данных (если это строка, преобразуйте ее в Date) матч. Если это так, то извлеките поле данных, с которым вы хотите "связать" его.

Соответствующий код (предполагается, что ваше поле данных для дат "date"):

function dataToDate(dateStr) {
  return chart.dateFormatter.parse(dateStr);
}
function sameDates(date1, date2) {
  return date1.getTime() === date2.getTime();
}
function matchAxisDateToData(axisLabel) {
  var length = chart.data.length;
  for (var i = 0; i < length; ++i) {
    // there are more axis labels than we see, and some of them will return undefined for their date
    if (axisLabel.dataItem.dates.date && sameDates(axisLabel.dataItem.dates.date, dataToDate(chart.data[i].date))) {
      return chart.data[i].timeOfDay;
    }
  }
  return false;
}
dateAxis.renderer.labels.template.adapter.add("text", function(text, axisLabel) {
  var dataText;
  if (axisLabel.dataItem.dates.date) {
    dataText = matchAxisDateToData(axisLabel);
  }
  // if there's a match, return that, otherwise return the default "text"
  return dataText || text;
});

Вот демонстрация вышеупомянутого:

https://codepen.io/team/amcharts/pen/eb455855b460998f4e4282a0216a9443