Точечная диаграмма Highcharts с именем на точку

Я пытаюсь настроить точечную диаграмму Highcharts с помощью этой серии дат.

series: [{
    data: [[1,2],[2,5]]
}]

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

series: [{
    data: [{
        name: 'Point 1',
        x: 1,
        y: 2
    }, {
        name: 'Point 2',
        x: 2,
        y: 5
    }]
}]

но кажется, что значения x и y не подобраны. См. мой пример jsfiddle.


highcharts
person emeraldjava    schedule 01.07.2011    source источник

Ответы (6)


arrow_upward
3
arrow_downward

Как указано в документации, поле имени представляет собой имя точки, как показано в легенде, всплывающая подсказка, dataLabel и так далее. Я обновил вашу скрипку, включив в нее библиотеку highcharts, и я вижу такое поведение (например, если я наведу курсор на точка, отображается ее метка).

Если вы хотите, чтобы метки оси X были установлены правильно, вам необходимо убедиться, что в разделе xAxis конфигурации вашей диаграммы нет ключа categories.

person NT3RP    schedule 02.07.2011
comment
Ваша скрипка не работает для меня. Он просто показывает серию 1 по обеим точкам. Возможно, обновление библиотеки Highcharts нарушило желаемое поведение? - person Mark Eirich; 26.02.2013
comment
возможно, это работало раньше, но скрипка больше не работает - она ​​вернулась к использованию имени серии, а НЕ имени точки, в качестве имени точки. - person speciesUnknown; 05.09.2018

arrow_upward
5
arrow_downward

Этот ответ работает для Highcharts 4.1.9.

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

Ваш пробег может отличаться для других версий.

       plotOptions: {
            scatter: {
                dataLabels: {
                    format: "{point.name}",
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: 'Projects',
            data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}]
        }]

Каковы ключевые моменты?

  1. Убедитесь, что scatter.dataLabels включен и формат {point.name}
  2. Убедитесь, что данные в формате {"name":"Point 1", "x":1,"y":2}
person Kim Stacks    schedule 09.10.2015
comment
Здесь работает {point.key} вместо {point.name}: всплывающая подсказка: {headFormat: '‹b›{series.name} ({point.key})‹/b›‹br›', pointFormat: '{ точка.х}, {точка.у} ' } - person bebbo; 09.03.2016

arrow_upward
4
arrow_downward

Как упоминалось в этом комментарии, что работает для меня в Highcharts 5.0.6 это:

{
  type: 'scatter',
  tooltip: { headerFormat: '<strong>{point.key}</strong><br>' },
  data: [{ x: 0, y: 1, name: 'Whatever' }, ...]
}
person jonrsharpe    schedule 04.01.2017

arrow_upward
3
arrow_downward

Вы также можете показать имена в разделе легенды. Обновлен выбранный выше ответ здесь

series: [{
        name: 'Point 1',
        data: [[3, 3]]
    }, {
        name: 'Point 2',
        data: [[4, 8]]
    }, {
        name: 'Point 3',
        data: [[9, 15]]
    }]
person Kent Aguilar    schedule 26.11.2013
comment
это, кажется, единственный ответ, который действительно отвечает на исходный вопрос! - person Corvus; 23.07.2015
comment
да, это прямое решение вопроса - person ; 26.08.2016

arrow_upward
3
arrow_downward

Это новая функция в HighCharts 3.0. Вы должны определить тип xAxis как «Категория» и указать имя точки в данных, если вы хотите, чтобы она отображалась на xAxis:

 xAxis: {
   //categories: ['Green', 'Pink'],
    type: 'category'
},
...
 data: [{
        name: 'Green',
        x: 1,
        y: 2
    }, {
        name: 'Pink',
        x: 2,
        y: 5
    }]

Смотрите обновленный код jsFiddle: здесь. Обратите внимание, что я добавил функцию форматирования всплывающей подсказки, чтобы показать, что point.x больше не имеет значения в этом контексте, остается актуальным только point.name.
Кроме того, вы не можете иметь две точки с разными «именами» в одном и том же x позиция.

person user3423225    schedule 17.03.2014

arrow_upward
2
arrow_downward

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

Согласно документам (здесь: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), во всплывающей подсказке показаны не все поля, которые можно добавить к точке данных, а

Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.

Чтобы отобразить имя точки данных (и любые другие нужные поля), просто измените HTML-код, отображаемый во всплывающей подсказке. Например, вы можете отобразить имя точки и координаты во всплывающей подсказке при удалении имени серии следующим образом:

chart: {
  type: "scatter",
}
tooltip: {
  headerFormat: '',
  pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>',
},
person the911s    schedule 01.01.2018
comment
Теперь это правильный ответ - похоже, это какое-то изменение в API highcharts с 2013 года. - person speciesUnknown; 05.09.2018