Highchart工具提示在一个页面上覆盖多个图表

Question

我正在尝试使用highcharts将3个图表放到一个页面上。每个图表都是具有自己数据的局部视图，并包含带有唯一ID的div。

这一切都很好，期待工具提示。在要加载的最后一个图表上定义的工具提示将覆盖其他2个图表上的工具提示。

有人可以解释为什么在这些完全独立的对象之间共享工具提示吗？

以下是每个部分的高位代码：

＆＃13;

＆＃13;

$('div#' + chartName).each(function (idx, eachChartContainer) {
  if (!$(eachChartContainer).parent().is(':visible')) return;
  $(eachChartContainer).highcharts('StockChart',
  {
      chart: {
          backgroundColor: '#FFFFFF',
          renderTo: chartName[idx],
          isHighcharts: false,
          events: {
              load: function () {
                  var chart = $(eachChartContainer).highcharts();
                  if (chartInterval === '1_day') {
                      chart.series[0].update({
                          tooltip: { xDateFormat: '%a %e %b, %Y %H:%M' }
                      });
                  } else {
                      chart.series[0].update({
                          tooltip: { xDateFormat: '%a %e %b, %Y' }
                      });
                  }
              }
          },
          height: 180,
          resetZoomButton: {
              theme: {
                  fill: '#fff',
                  stroke: '#fff',
                  r: 2,
                  states: { hover: { fill: '#fff' } }
              }
          },
          spacingBottom: 0,
          spacingLeft: 0,
          zoomType: chartZoomType
      },
      rangeSelector: {
          selected: 0,
          inputEnabled: true,
          allButtonsEnabled: true,
          enabled: false
      },
      navigator: { enabled: false, adaptToUpdateData: true },
      scrollbar: { enabled: false, liveRedraw: true },
      plotOptions: {
          series: {
              dataGrouping: {
                  dateTimeLabelFormats: {
                      millisecond: ['%a %e %b, %Y %H:%M:%S.%L', '%a, %b %e, %H:%M:%S.%L'],
                      second: ['%a %e %b, %Y %H:%M:%S', '%a, %b %e, %H:%M:%S'],
                      minute: ['%a %e %b, %Y %H:%M', '%a %e %b, %Y %H:%M'],
                      hour: ['%a %e %b, %Y %H:%M', '%A, %b %e, %H:%M'],
                      day: ['%a %e %b, %Y', '%a %e %b'],
                      week: ['%a %e %b, %Y', '%a %e %b'],
                      month: ['%B %Y', '%B'],
                      year: ['%Y', '%Y']
                  }
              },
              animation: { duration: 2000, easing: 'swing' }
          }
      },
      tooltip: {
          valueSuffix: 'p',
          xDateFormat: '%a %e %b, %Y %H:%M',
          formatter: function () {
              return Highcharts.dateFormat('%a %e %b, %Y', this.x) + "<br />" + epic + ": <b>" + this.y + "</b>";
          }
      },
      xAxis: {
          ordinal: extendGraph,
          max: endOfMarket,
          dateTimeLabelFormats: {
              second: '%H:%M:%S',
              minute: '%H:%M',
              hour: '%H:%M',
              day: '%e %b',
              week: '%e %b',
              month: '%b %y',
              year: '%Y'
          },
          title: { text: '' },
          labels: {
              y: 24,
              x: 8
          }
      },
      yAxis: {
          labels: {
              align: 'right',
              formatter: function () {
                  var chart = $(eachChartContainer).highcharts();
                  if (this.value === undefined || this.value === null || this.value === 0) {
                      return '0';
                  }
                  if (chart.yAxis[0].dataMax === chart.yAxis[0].dataMin) {
                      return this.value;
                  }
                  if (chart.yAxis[0].max - chart.yAxis[0].min <= 1) {
                      return Highcharts.numberFormat(this.value, 3);
                  }
                  if (chart.yAxis[0].max >= -4 && chart.yAxis[0].max <= 0) {
                      return this.value;
                  }
                  if (chart.yAxis[0].max <= 0.2) {
                      return Highcharts.numberFormat(this.value, 3);
                  } else if (chart.yAxis[0].max > 0.2 && chart.yAxis[0].max <= 4) {
                      return Highcharts.numberFormat(this.value, 2);
                  }
                  return Highcharts.numberFormat(this.value, null, '.', ',');
              },
              x: -8,
              y: 3,
          },
          min: 0,
          opposite: false,
          showFirstLabel: true,
          showLastLabel: true,
          tickPixelInterval: 60,
          tickPositioner: function () {
              var positions = [];
              if (this.dataMax <= 3) {
                  return null;
              }
              if (this.dataMax == this.dataMin) {
                  return null;
              }
              var tick = Math.floor(this.dataMin),
                  increment = Math.ceil((this.dataMax - this.dataMin) / 6);
              for (tick; tick - increment <= this.dataMax; tick += increment) {
                  positions.push(tick);
              }
              return positions;
          },
          title: {
              text: marketCurrency
          }
      },
      series: [
          {
              threshold: null,
              fillOpacity: 0.5,
              pointInterval: 300000,
              pointStart: { pointStart: Date.parse('01/24/2017 08:00:00') },
              data: data,
              name: epic,
              type: 'area'
          }
      ]
  });
                })

＆＃13;

＆＃13;

＆＃13;

容器divs ID在chartName变量

中传递

epic变量在div ID中用于标识图表，应该在工具提示中使用（这有点不起作用）