Highcharts Legend Custom HTML

Question

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

Я попытался установить функцию labelFormatter, но, похоже, она поддерживает только простой текст.

Есть ли простой способ сделать это с старшими диаграммами или я пытаюсь написать свою собственную функцию, используя ловушки событий старшей диаграммы, которые добавят нужный мне HTML-код?

Любая помощь приветствуется. Спасибо!

Answer 1

Можно установить для опции useHTML легенды Highcharts значение true.

legend: {
    useHTML: true,
    labelFormatter: function () {
        return '<span title="' + this.name + '">' + this.name + '</span>';
    }
}

http://api.highcharts.com/highcharts/legend.useHTML

Answer 2

, если вы хотите работать с html надписями / подсказками любого типа, вам нужно установить для useHTML значение true (нет в документации: /)Это дает некоторые проблемы с позиционированием, но может отображать любой HTML.

пример

plotOptions : {
   series: {
     dataLabels: {
       useHTML: true
     }
   }
}

Answer 3

Посмотрите на этот пример.http://jsfiddle.net/LCFKA/ Вы должны установить данные своей серии в загруженных данных, а затем просто установить в функции getItemsDescription то, что вы хотите показать.

Answer 4

Так что я в конце концов придумал «решение» для этого.Я не уверен, что это лучше, но я хотел оставить здесь записку на случай, если кому-то еще это понадобится.

В итоге я расширил исходный код highstock и скопировал их код showCheckbox в код showTextbox.Это не очень общее решение, но оно решило мою конкретную проблему.Мне также пришлось изменить обработчик onmousedown, чтобы разрешить передачу фокуса в текстовое поле при его нажатии.

Поля отображаются в формате html с точным положением, поэтому они отображаются рядом с элементами легенды.Сама легенда является частью SVG-графика, что затрудняет добавление туда другого html-кода.

Если вам нужен весь код - оставьте комментарий, и я его опубликую.