在多个图表上显示工具提示 - HighCharts

时间:2017-08-10 09:13:46

标签: highcharts

当我将鼠标悬停在一个图表上时,将显示工具提示。同时,我希望工具提示在另一个图表上也显示在同一位置。

我添加了代码来监听mouseOver事件,然后在其他图表上显示工具提示。但是,我无法获得mouseOver事件中的位置。

在我创建的jsfiddle示例中,我总是将位置硬编码1.但是,它应该是动态的,并且应该与现在显示工具提示的位置相同。



$(function() {

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  });

  var chart1 = new Highcharts.Chart({
    chart: {
      renderTo: 'container1'
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],
    plotOptions: {
      series: {
        events: {
          mouseOver: function() {
            //instead of data[i] it should be data[xposition]
            chart.series[0].data[1].setState('hover');
            chart.tooltip.refresh(chart.series[0].data[1]);
          }
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 400px; width: 500px"></div>
<div id="container" style="height: 400px; width: 500px"></div>
<button id="button">Select point</button>
&#13;
&#13;
&#13;

如何获得mouseOver事件中的位置?

感谢您的帮助。

JSFiddle

编辑:

有一个类似的问题Highcharts shared tooltip between charts with multiple series and shared tooltip。但是,这个问题主要围绕共享财产。在这种情况下,我没有在任何图表中添加共享属性。

0 个答案:

没有答案