Несколько круговых диаграмм в 1 графике с всплывающей подсказкой Highcharts.js - PullRequest
Новая
       53

Несколько круговых диаграмм в 1 графике с всплывающей подсказкой Highcharts.js

0 голосов
/ 31 мая 2018

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

Я пытался использовать 

{
    tooltip: { split: true} 
}

, но выдает ошибку JavaScript и, похоже, не работает на круговых диаграммах.Кажется, я не могу заставить это работать должным образом.Я также попытался переопределить Highcharts.Tooltip.prototype.renderSplit, но не смог заставить его работать.

У меня есть следующее: https://jsfiddle.net/Visualq/4o1uyazr/13/

1 Ответ

0 голосов
/ 01 июня 2018

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

  1. Создать для каждой серии одну подсказку 

    Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      load() {
        this.tooltips = this.series.slice(1).map(
        series => new Highcharts.Tooltip(
          this,
          Highcharts.merge(this.options.tooltip)
        )
      )
    }
  }
},

  2. При наведении мыши на вызов tooltip.refresh(point), где точка - точка, которая должна зависать.Я призываю точки с одинаковыми именами. 

    plotOptions: {
  series: {
    point: {
      events: {
        mouseOver(e) {
          const otherSeries = this.series.chart.series.filter(
            series => series !== this.series
          )

          const otherPoints = otherSeries.map(
            series => series.points.find(
              point => point.name === this.name
            )
          )

          this.series.chart.tooltips.forEach((tooltip, i) => {
            tooltip.refresh(otherPoints[i])
          })
        }
      }
    }
  }
},

  3. Обернуть метод скрытия подсказки, чтобы все подсказки были скрыты одновременно. 

    Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(p, delay) {
  if (this === this.chart.tooltip) {
    p.call(this, delay)

    this.chart.tooltips.forEach(tooltip => {
      p.call(tooltip, delay)
    })
  }
})

пример в реальном времени: https://jsfiddle.net/8w30m3o8/

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

Возможно, более простым решением было бы использовать 3 диаграммы и синхронизировать подсказки аналогично тому, как это делается в этом примере: https://www.highcharts.com/demo/synchronized-charts

...