Показывать подсказки по всем точкам вертикальной линии

Question

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

Вот код, показывающий, что отображается только одна точка / маркер - https://jsfiddle.net/Lftwjymc/

Копия кода:

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 0, 1), 71.5],
            [Date.UTC(2010, 0, 1), 75.5],
            [Date.UTC(2010, 0, 1), 80.5],
            [Date.UTC(2010, 0, 1), 106.4]
        ]
    }]
});

Мой код является крошечной модификацией(только что сделал вертикальную линию) примера из api - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/

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

Или как сделать всплывающую подсказку на сюжетной линии?

Answer 1

Вы можете легко достичь этого, используя один из следующих подходов:

1. Используйте plotLine для отображения линии и scatter серии для построения каждой точки отдельно:

Код:

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime',
    plotLines: [{
        color: '#FF0000',
        value: Date.UTC(2010, 0, 1),
      width: 1
    }]
  },
  series: [{
    type: 'scatter',
    data: [
      [Date.UTC(2010, 0, 1), 29.9],
      [Date.UTC(2010, 0, 1), 71.5],
      [Date.UTC(2010, 0, 1), 75.5],
      [Date.UTC(2010, 0, 1), 80.5],
      [Date.UTC(2010, 0, 1), 106.4]
    ]
  }]
});

Демо:

• https://jsfiddle.net/BlackLabel/sm4wxo1k/1/

API:

• https://api.highcharts.com/highcharts/series.scatter

---

Создание двух серий с одинаковыми точками данных, line и scatter:

Код:

const data = [
  [Date.UTC(2010, 0, 1), 29.9],
  [Date.UTC(2010, 0, 1), 71.5],
  [Date.UTC(2010, 0, 1), 75.5],
  [Date.UTC(2010, 0, 1), 80.5],
  [Date.UTC(2010, 0, 1), 106.4]
];

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    linkedTo: 'main',
    data: data
  }, {
    type: 'scatter',
    id: 'main',
    name: 'Series',
    data: data
  }]
});

Демонстрация:

• https://jsfiddle.net/BlackLabel/g7nzxfL6/

Answer 2

На основании ответа Войцеха Хмеля - https://stackoverflow.com/a/56124122/1015848

Мне удалось сделать вертикальную линию с подсказками: Вот пример - https://jsfiddle.net/05bwkzma/

Это выглядит так:

Критические предметы: использовать точечный график; использовать линейный график, который связан с точечным графиком; Диаграмма рассеяния должна иметь маркер.enabled = false и status.hover.enabled = false [пример] .

Код:

const data = [
  [Date.UTC(2010, 0, 1), 29],
  [Date.UTC(2010, 0, 1), 30],
  [Date.UTC(2010, 0, 1), 31],
  [Date.UTC(2010, 0, 1), 32],
  [Date.UTC(2010, 0, 1), 33]
];

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    linkedTo: 'main',
    data: data
  }, {
    type: 'scatter',
    id: 'main',
    name: 'Series',
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    data: data
  }]
});