Question

我想要＆＃34;同步图表的功能＆＃34;例如，但是有Highstock。但是当我试图完成这个时，我得到了＃34; highstock.src.js：9991未捕获的TypeError：无法读取属性＆＃39; category＆＃39;未定义＆＃34;

这也直接用于示例：http://www.highcharts.com/demo/synchronized-charts在转换为Highstock时不起作用：http://jsfiddle.net/9gq47g0w/

（因为StackOverflow要求我发布一些代码和小提琴，这里来自Highstock，注意它与**崩溃的地方）：

    /**
     * Refresh the tooltip's text and position.
     * @param {Object} point
     */
    refresh: function (point, mouseEvent) {
        ...
        // shared tooltip, array is sent over
        if (shared && !(point.series && point.series.noSharedTooltip)) {
            ...
            textConfig = {
                x: ** point[0].category, ** <- here!
                y: point[0].y
            };
           ...
        }
        ...
    },

Answer 1

在这里您可以找到同步高斯图的示例： http://jsfiddle.net/vw77cooj/20/

此示例使用自定义函数在图表上同步极值和工具提示：

  function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function(chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: 'syncExtremes'
            });
          }
        }
      });
    }
  }

$('#container').bind('mousemove touchmove touchstart', function(e) {
  Highcharts.each(Highcharts.charts, function(chart) {
    event = chart.pointer.normalize(e.originalEvent);
    point = chart.series[0].searchPoint(event, true);

    if (point) {
      point.onMouseOver(); // Show the hover marker
      chart.tooltip.refresh(point); // Show the tooltip
      chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
    }
  });
});

如果您的图表上有多个系列，您可以更改负责同步工具提示的功能：

  function syncTooltip(container, p) {
    var i = 0,
      j = 0,
      data,
      series,
      points = [];
    for (; i < chartSummary.length; i++) {
      if (container.id != chartSummary[i].container.id) {
        series = chartSummary[i].series
        Highcharts.each(series, function(s) {
          Highcharts.each(s.data, function(point) {
            if (point.x === p && point.series.yAxis.options.index !== 1) {
              points.push(point)
            }
          })
        });
        chartSummary[i].tooltip.refresh(points);
      }
    };
  }

http://jsfiddle.net/ZArZM/316/

Answer 2

有关Highstock的一个很好的工作示例，请使用MouseOver和MouseOut跟随此示例：

var onMouseOver = function onMouseOver() {
    var x = this.x,
      interactedChart = this.series.chart,
      points = [],
      charts = Highcharts.charts,
      each = Highcharts.each;
    each(charts, function(chart) {
      if (chart !== interactedChart) {
        each(chart.series, function(series) {
          each(series.data, function(point) {
            if (point.x === x && point.series.yAxis.options.index !== 1) {
              points.push(point)
            }
          })
        });
        each(points, function(p) {
          p.setState('hover');
        });
        chart.tooltip.refresh(points);
      }
    });
  }

http://jsfiddle.net/ska1r5wq/

您可以通过网络上提供的示例避免许多工具提示问题。

来源：https://github.com/highcharts/highcharts/issues/6595

与Highstock崩溃的同步图表示例＆＃34;无法读取属性＆＃39;类别＆＃39;未定义＆＃34;

2 个答案: