实施同步绘图线和高图工具提示时出现问题 [英] Problems implementing synchronized plotline and tooltips for highcharts

问题描述

我正在尝试在此jsfiddle中实现同步的高级图表 http://jsfiddle.net/j7hk1802/但我遇到了问题.

I'm trying to implement synchronized highcharts as in this jsfiddle http://jsfiddle.net/j7hk1802/ but I'm having problems.

同步绘图线仅显示在绘图的最左侧或右侧(没有数据)，一旦我将绘图线移动到有数据的位置，同步就会中断，并且开始出现很多控制台错误:

The synchronized plotline only shows at the very left or right of the plots (where there is no data), as soon as I move the plot line to where there is data the synchronization breaks and I start getting a lot of console errors:

highcharts.src.js:21444 Uncaught TypeError: (c || []).forEach is not a function
    at n.applyInactiveState (highcharts.src.js:21444)
    at e.refresh (highcharts.src.js:20820)
    at test2.html:119
    at Array.forEach (<anonymous>)
    at Object.d.<computed> [as each] (highcharts.src.js:2207)
    at HTMLDivElement.<anonymous> (test2.html:112)
    at HTMLDivElement.dispatch (jquery-latest.js:4641)
    at HTMLDivElement.elemData.handle (jquery-latest.js:4309)

这与以下代码有关:

container.mousemove(function(evt) {

    x = evt.clientX - chart.plotLeft - offset.left;
    y = evt.clientY - chart.plotTop - offset.top;
    var xAxis = chart.xAxis[0];
    var xVal = xAxis.toValue(x, true);
    //remove old plot line and draw new plot line (crosshair) for this chart
    var xAxis1 = chart1.xAxis[0];
    var points1 = chart1.series[0].points;

    Highcharts.each(points1, function(point, i) {
      if (i + 1 < points1.length && point.x <= xVal && points1[i + 1].x > xVal) {
        //reset state
        point.setState();
        points1[i + 1].setState();

        if (xVal - point.x <= points1[i + 1].x - xVal) {
          chart1.tooltip.refresh(point);
          point.setState('hover');
        } else {
          chart1.tooltip.refresh(points1[i + 1]);
          points1[i + 1].setState('hover');
        }
      }
    });

我试图创建一个jsfiddle来复制错误，但是我仍在努力使功能图表显示在jsfiddle中，但是我的尝试可以在这里找到:

I've tried to create a jsfiddle to replicate the error, but I'm still struggling to get functioning charts to show in jsfiddle, however my attempt can be found here: https://jsfiddle.net/ashenshugar/a72csgro/6/

我非常感谢您的帮助，因为这是我能够为天气数据创建动态图表所需的最后一步.

I'd really appreciate some help as this is the last step I need to be able to create dynamic charts for my weather data.

下面的塞巴斯蒂安·温泽(SebastianWędzel)解决方案可消除控制台错误，但是第一个图表正在与其他图表同步到另一个条目:

Sebastian Wędzel's solution below works to remove the console errors, however the first chart is synchronizing to a different entry to the other charts:

我添加的第三和第四图表的工具提示没有显示正确的序列，我确定我没有正确更新这些图表的代码，但是看不到我的错误.

Also the tooltips for the 3rd and 4th charts I've added aren't showing the correct series, I'm sure I've not updated the code correctly for these charts, but can't see my error.

我的新代码在这里 https://jsfiddle.net/ashenshugar/sj90gw4x/3/

推荐答案

此处显示了所有四个图表的正确工具提示的更新代码

The updated code to display the correct tooltips for all four charts is here jsfiddle.net/BlackLabel/61bs9nfq and was provided by Sebastian Wędzel.

为了解决由不同尺寸的轴标签引起的对齐问题，您必须为所有图表指定相同尺寸的左右边距，如下所示

In order to fix the alignment issue caused by different sized axis labels you must specify the same sized left and right margins for all charts as follows

chart: {
      marginLeft: 100, //size of left margin in pixels
      marginRight: 100, //size of right margin in pixels
      }

这篇关于实施同步绘图线和高图工具提示时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！