Highcharts - 2 синхронизированных индикатора активности

Question

Я начинаю с этого индикатора активности Highcharts и пытаюсь получить два из них, выровненных по горизонтали (аналогично этому другому примеру ) и синхронизированных.

Iначал изменять код из 1-го примера, основываясь на 2-м примере, и до сих пор у меня не получается, 2-й график даже не отображается успешно.

Что я делаю неправильно?

Мой код, также в JSFiddle :

function renderIcons() {

  // Move icon
  if (!this.series[0].icon) {
    this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
      .attr({
        'stroke': '#303030',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }
  this.series[0].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
    (this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
  );

  // Exercise icon
  if (!this.series[1].icon) {
    this.series[1].icon = this.renderer.path(
        ['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
          'M', 8, -8, 'L', 16, 0, 8, 8
        ]
      )
      .attr({
        'stroke': '#ffffff',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }
  this.series[1].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
    (this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
  );

  // Stand icon
  if (!this.series[2].icon) {
    this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
      .attr({
        'stroke': '#303030',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }

  this.series[2].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
    (this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
  );
}

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    //height: 200,
    height: '50%',
    events: {
      render: renderIcons
    }
  },

  title: {
    text: 'Activity',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    borderWidth: 0,
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '16px'
    },
    pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
    positioner: function(labelWidth) {
      return {
        x: (this.chart.chartWidth - labelWidth) / 2,
        y: (this.chart.plotHeight / 2) + 15
      };
    }
  },

  pane: [{
      startAngle: 0,
      endAngle: 360,
      center: ['25%', '50%'],
      background: [{ // Track for Move
        outerRadius: '112%',
        innerRadius: '88%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
          .setOpacity(0.3)
          .get(),
        borderWidth: 0
      }, { // Track for Exercise
        outerRadius: '87%',
        innerRadius: '63%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
          .setOpacity(0.3)
          .get(),
        borderWidth: 0
      }, { // Track for Stand
        outerRadius: '62%',
        innerRadius: '38%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
          .setOpacity(0.3)
          .get(),
        borderWidth: 0
      }]
    },
    {
      startAngle: 0,
      endAngle: 360,
      center: ['75%', '50%'],
      background: [{ // Track for Move
        outerRadius: '112%',
        innerRadius: '88%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
          .setOpacity(0.3)
          .get(),
        borderWidth: 0
      }, { // Track for Exercise
        outerRadius: '87%',
        innerRadius: '63%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
          .setOpacity(0.3)
          .get(),
        borderWidth: 0
      }, { // Track for Stand
        outerRadius: '62%',
        innerRadius: '38%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
          .setOpacity(0.3)
          .get(),
        borderWidth: 0
      }]
    }
  ],

  yAxis: [{
      min: 0,
      max: 100,
      lineWidth: 0,
      pane: 0,
      tickPositions: []
    },
    {
      min: 0,
      max: 100,
      lineWidth: 0,
      pane: 1,
      tickPositions: []
    }
  ],

  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      linecap: 'round',
      stickyTracking: false,
      rounded: true
    }
  },

  series: [{
      name: 'Move',
      data: [{
        color: Highcharts.getOptions().colors[0],
        radius: '112%',
        innerRadius: '88%',
        yAxis: 0,
        pane: 0,
        y: 80
      }]
    }, {
      name: 'Exercise',
      data: [{
        color: Highcharts.getOptions().colors[1],
        radius: '87%',
        innerRadius: '63%',
        yAxis: 0,
        pane: 0,
        y: 65
      }]
    }, {
      name: 'Stand',
      data: [{
        color: Highcharts.getOptions().colors[2],
        radius: '62%',
        innerRadius: '38%',
        yAxis: 0,
        pane: 0,
        y: 50
      }]
    },

    {
      name: 'Move',
      data: [{
        color: Highcharts.getOptions().colors[0],
        radius: '112%',
        innerRadius: '88%',
        yAxis: 1,
        pane: 1,
        y: 75
      }]
    }, {
      name: 'Exercise',
      data: [{
        color: Highcharts.getOptions().colors[1],
        radius: '87%',
        innerRadius: '63%',
        yAxis: 1,
        pane: 1,
        y: 60
      }]
    }, {
      name: 'Stand',
      data: [{
        color: Highcharts.getOptions().colors[2],
        radius: '62%',
        innerRadius: '38%',
        yAxis: 1,
        pane: 1,
        y: 45
      }]
    }
  ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container" style="width: 800px; height: 300px; margin: 0 auto"></div>

Answer 1

Проблема в вашем примере заключается в том, что у вас нет отдельных графиков, но есть один график с двумя осями YAXIS.Посмотрите пример синхронизированных диаграмм Highcharts здесь: jsfiddle .Обратите внимание, что каждая диаграмма является отдельной и вставлена ​​в отдельный контейнер div.

Поэтому сначала создайте две диаграммы типа Solidgauge и выровняйте их по горизонтали.Затем добавьте триггер mousemove к элементу div контейнера, который содержит ваши диаграммы.Высокие диаграммы оборачивают все события браузера, и когда вы наводите курсор мыши на серию диаграмм, у вас есть информация о диаграмме на основе, серии и т. Д.

Используйте индекс навесной серии, чтобы вызвать метод onMouseOver() для соответствующих серий в обеих диаграммах и обновить всплывающую подсказку с помощьюточка из намеченной серии:

HTML:

<div id="container">
  <div id="container1"></div>
  <div id="container2"></div>
</div>

JS:

['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
  document.getElementById('container').addEventListener(
    eventType,
    function(e) {
      var chart,
        point,
        i,
        seriesIndex,
        event;

      for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e);

        if (event.srcElement.point) {
          seriesIndex = event.srcElement.point.series.index;
        }

        if (chart.series[seriesIndex]) {
            point = chart.series[seriesIndex].points[0];
            chart.series[seriesIndex].onMouseOver();
            chart.tooltip.refresh(point);
        }

      }
    }
  );
});

Обратите внимание, Highcharts.charts содержит все ссылки на диаграммы.

Демонстрация:
https://jsfiddle.net/wchmiel/ce01y63s/

Ссылка API:
Highcharts.Series.onMouseOver
Highcharts.charts