Блог

Я пытаюсь получить доступ к зависшим в данный момент данным серии и цвету через JavaScript. Данные доступны в легенде и всплывающей подсказке, но я не уверен, как получить к ним прямой доступ.

Можно поместить легенду во внешний контейнер, но их код создает множество дополнительных контейнеров / оболочек, что затрудняет форматирование. Этот вопрос на Github касается этого, но ответа предоставлено не было.

Возможно, события можно было бы использовать для обнаружения изменений в тексте легенды или элементах tspan, а затем захватить новый текст, но я не уверен, как это сделать (используя события amCharts) и насколько это было бы эффективно (особенно с несколькими сериями и / или диаграммами с синхронизированными курсорами).

Другой идеей было получить данные на основе положения курсора, но это кажется неэффективным ( cursorpositionchanged срабатывает слишком часто — при перемещении мыши / курсора, даже если данные серии не изменились). Может быть, это можно было бы сделать более эффективно на основе изменения значения DateAxis? Например, с помощью positionchanged прослушивателя событий:

 chart.cursor.lineX.events.on('positionchanged', function() {
    // get series data and do something with it
});
  

По крайней мере, при использовании chart.cursor.xAxis = dateAxis событие positionchanged срабатывает только тогда, когда курсор переходит к новому значению. Таким образом, это было бы более эффективно, чем событие, вызванное движением мыши / курсора.

Любые предложения будут оценены.

Обновить

Под текущим зависанием я имею в виду данные серии и цвет, доступные через всплывающую подсказку (например) при наведении курсора мыши на диаграмму.

Примеры: серии свечей и линейные серии

Один из методов, который вы можете попробовать, — это установить адаптер для tooltipText соответствующего объекта. Поскольку это может выполняться несколько раз, особенно с помощью курсора диаграммы, возможно, следите за изменениями во всплывающей подсказке, отслеживая уникальное значение, например, в предоставленных примерах, которое будет date полем. Данные, которые вы ищете, можно найти в target.tooltipDataItem адаптере. Цвет, если он находится в серии, будет target.tooltipDataItem.component.fill (в случае примера серии строк, target это серия строк и цвет не меняется, поэтому вы можете просто использовать target.fill ), в противном случае, например, в случае серии свечей цвет будет на подсвечнике или column , т. Е. через target.tooltipDataItem.column.fill .

Пример адаптера для LineSeries:

 var tooltipDate;
series.adapter.add("tooltipText", function(text, target) {
  // data via target.tooltipDataItem.dataContext
  console.log('text adapter; color: ', target.tooltipDataItem.component.fill.hex);
  if (tooltipDate !== target.tooltipDataItem.dataContext.date) {
    console.log('new tooltip date, do something');
    tooltipDate = target.tooltipDataItem.dataContext.date;
  }
  // note: in this case: component === target 
  return text;
});
  

ДЕМОНСТРАЦИЯ:

https://codepen.io/team/amcharts/pen/9f621f6a0e5d0441fe55b99a25094e2b

Пример адаптера серии подсвечников:

 var tooltipDate;
series.adapter.add("tooltipText", function(text, target) {
  // data via target.tooltipDataItem.dataContext
  console.log('text adapter; color: ', target.tooltipDataItem.column.fill.hex);
  if (tooltipDate !== target.tooltipDataItem.dataContext.date) {
    console.log('new tooltip date, do something');
    tooltipDate = target.tooltipDataItem.dataContext.date;
  }
  return text;
});
  

ДЕМОНСТРАЦИЯ:

https://codepen.io/team/amcharts/pen/80343b59241b72cf8246c266d70281a7

Дайте нам знать, имеет ли это смысл, и является ли маршрут адаптера подходящим моментом времени для фиксации изменений, данных, цвета, а также достаточно ли он эффективен для этого.