javascript - Highcharts - 2 个同步事件量表

Question

我从这个Highcharts activity gauge开始并尝试让其中两个水平对齐(类似于 this other example )并同步。

我从第一个例子开始修改代码，基于第二个例子，到现在我都不成功，第二个图表甚至没有显示成功。

我做错了什么？

我的代码，也在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

您的示例中的问题是您没有单独的图表，而是一个带有两个 y 轴的图表。在此处查看 Highcharts 同步图表示例:jsfiddle .请注意，每个图表都是独立的并插入到单独的 div 容器中。

因此首先创建两个 solidgauge 类型的图表并将它们水平对齐。然后在包含图表的容器 div 元素上添加 mousemove 触发器。 Highcharts 包装所有浏览器事件，当您将鼠标悬停在图表系列上时，您将获得有关悬停图表、系列等的信息。

使用悬停系列索引在两个图表中的适当系列上调用 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