Диаграмма разброса Highcharts с именем на точку

Question

Я пытаюсь настроить график рассеяния 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 пример.

Answer 1

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

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

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

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

1. Убедитесь, что включен scatter.dataLabels и формат {point.name}
2. Убедитесь, что данныев формате {"name":"Point 1", "x":1,"y":2}

Answer 2

Это новая функция в HighCharts 3.0. Вы должны определить тип xAxis для «Category» и дать имя точки в данных, если вы хотите, чтобы она отображалась в 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 остается релевантным.
Кроме того, вы не можете иметь две точки с разными «name» в одном и том же x положение.

Answer 3

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

series: [{
        name: 'Point 1',
        data: [[3, 3]]
    }, {
        name: 'Point 2',
        data: [[4, 8]]
    }, {
        name: 'Point 3',
        data: [[9, 15]]
    }]

Answer 4

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

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

Answer 5

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

По документам (здесь: 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>',
},

Answer 6

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

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