Добавить данные в легенду в другом формате? Или мне следует использовать метку?

#highcharts

#верхние диаграммы

Вопрос:

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

Я планирую добавить последнее значение, а также минимальное и максимальное.

Я искал несколько примеров, и я нашел один, в котором используется функция labelFormatter, хотя мне не повезло понять, как это работает.

Мне нужно иметь значения с другим цветом текста и другим размером, поэтому я даже не уверен, могу ли я использовать заголовок легенды для этой цели, или мне следует скрыть легенду и создать непосредственно метку (хотя тогда проблема связана с перемещением и изменением размера, верно? Поскольку легенда обновляет свою позицию при изменении размера окна диаграммы).

Какой лучший способ сделать то, что я планирую сделать? метка или легенда?

1. Вы хотите добавить текст, отформатированный с помощью HTML-кода, в область построения диаграммы?

2. Я думаю, да, иначе у меня не может быть другого размера шрифта и цвета, это правильно? Попробовал с меткой, и это может сработать, но я не могу сделать ее фон прозрачным, чтобы она не слишком выделялась на графике; вот почему я выбираю легенду (но меня устраивает любой метод, который работает).

3. Рассматриваете ли вы возможность использования заголовка легенды для добавления пользовательского текста ( api.highcharts.com/highcharts#legend.title ), в других сценариях вам нужно использовать средство визуализации или labelFormatter с набором useHTML (для настройки цветов).

Ответ №1:

Если вы рассматриваете возможность добавления HTML-элементов в область построения диаграммы, вам придется использовать Highcharts Renderer API.

Вы можете обратиться к этой рабочей демонстрации JSFIDDLE

это работает как:

 var chart = new Highcharts.Chart({
....
.....
......
}, function(chart) { // on complete

    chart.renderer.text('This text is <span style="color: red">styled</span> and <a href="http://example.com">linked</a>', 150, 80)
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();

});

1. Рад помочь вам, новичок! Пожалуйста, согласитесь принять ответ, если это действительно поможет, чтобы информация могла быть полезна и другим ! 🙂

2. Я всегда немного жду, чтобы дать лучший ответ, чтобы узнать, хочет ли кто-нибудь опубликовать; не похоже, что я забыл 🙂 Еще раз спасибо! Визуализация — это волшебство 🙂