Есть ли способ изменить метки оси? - PullRequest
Новая
       13

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

1 голос
/ 28 мая 2019

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

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

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

1 Ответ

0 голосов
/ 18 июня 2019

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

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

Для v4 вы должны использовать Адаптер на AxisLabel.Сложность использования ярлыков осей DateAxis заключается в том, что их 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

...