Множественные легенды диграфа

Question

Я хотел бы отобразить комбинацию параметров легенды диграфа «всегда» и «следовать». Недостатком использования «следовать» является то, что нет легенды, если нет мыши над графиком. Я хочу отображать легенду по умолчанию в отдельном div, если нет наведения курсора, аналогично легенде «всегда» с набором labelsDiv. Это позволило бы пользователю сделать снимок экрана с графиком, не беспокоясь о наведении курсора мыши на график, чтобы идентифицировать серию.

Dygraph. js, похоже, допускает только одну легенду.

Мой подход состоит в том, чтобы создать легенду c stati, используя названия серий, но мне не хватает цвета для каждой серии. Можно ли определить цвет каждой серии диграфа?

РЕДАКТИРОВАТЬ: Я привел пример ниже, где «dygraphcolor1» будет представлять цвет каждой серии.

//script
var serieslabels = [point1, point2, point3]

g = new Dygraph(document.getElementById(chart_title), data,
        {labels: serieslabels,
         legend: 'follow',
         labelsSeparateLines: true,
         labelsDiv: document.getElementById('chart_title_legend'), //remove since not allowed with legend = 'follow'

for (a=1; a < labels.length; a++){

//html via document.write
// this will make a list of each series label displayed in the same color as dygraph.
<p style ="color:dygraphcolor1"> serieslabels[a]</p>

}

Answer 1

Что ж, это больше похоже на взлом, чем я надеялся, но грубая идея состоит в том, чтобы установить legend: 'follow' на mouseenter и legend: 'always' на mouseleave. dygraphs не ожидает, что вы измените отображение легенды таким образом, поэтому вам нужно будет потом сделать небольшую очистку:

div.addEventListener('mouseenter', () => {
  g.updateOptions({legend: 'follow'});
});

div.addEventListener('mouseleave', () => {
  g.updateOptions({legend: 'always'});
  // A "follow" legend gets hidden on mouseleave, so make it visible again:
  div.querySelector('.dygraph-legend').style.display='';
  // This repositions it to the top/right of the chart:
  g.plugins_[0].plugin.predraw({dygraph: g});
});

Вот полная демонстрация . Для настройки отображения легенды вас также может заинтересовать обратный вызов legendFormatter.