时间戳

首页 > 解决方案 > HighCharts 工具提示出现在包含图表的对话框后面

highcharts - HighCharts 工具提示出现在包含图表的对话框后面

问题描述

我有一个组织 HighChart，我使用 Angular 在 javascript 中动态创建。在 $scope.chartConfig 我声明了这些：

    $scope.chartConfig = {
        title: {
          text: ''
        },
        chart: {
          inverted: false
        },
        series: [ {
          type: 'organization',
          data: [],
          keys: [ 'from', 'to' ],
          showInLegend: true,
          levels: [],
          nodes: []
        } ],
        options: {
          exporting: { enabled: false },
          tooltip: {
            enabled: true,
            outside: true,
            useHTML: true,
            formatter: function() {
              console.log("LOOK AT ME " + this.point.info);
              return this.point.info;
            }
          }
        }
    };

当它是这样的时候，工具提示就会出现在这个对话窗口的后面。“看我”部分按预期显示在控制台中。
如果我删除 options: { tooltip: {...}} 部分，那么工具提示会像它应该的那样显示在前面，但它只有名称（默认值）而不是我想要的信息节目。
我尝试添加选项：{ tooltip: { zindex: 999 }}，但没有任何变化 - 它仍然出现在后面。
我尝试添加选项：{ tooltip: { style: { zIndex: 999 }}} 也没有任何变化 - 工具提示仍然出现在对话框后面。关于如何让 HighCharts 工具提示出现在图表顶部而不是保存图表的对话框后面的任何想法？谢谢。
带有工具提示的对话框
该图像显示了一个对话框中的图表，该对话框是从一个对话框启动的，该对话框后面有工具提示，该工具提示位于启动对话框的主页前面。
我尝试在 JsFiddle 中重新创建，但我正在努力解决一些 Angular 问题，并且由于这是一个对话框，它从前一个窗口获取信息，这使得它很难破解。

标签： highchartstooltip

解决方案

由于 z-index 的问题，我很难在在线代码编辑器中重新创建它。具体来说，如果您将工具提示的“外部”选项设置为 true，则 z-index 将被硬编码为每个 HighCharts 的 3：

                if (this.outside) {
                    this.container = container = H.doc.createElement('div');
                    container.className = 'highcharts-tooltip-container';
                    H.css(container, {
                        position: 'absolute',
                        top: '1px',
                        pointerEvents: options.style && options.style.pointerEvents,
                        zIndex: 3
                    });
                    H.doc.body.appendChild(container);

                    this.renderer = renderer = new H.Renderer(container, 0, 0);
                }

因为它在 getLabel() 中，所以没有简单的方法可以解决这个问题。这通常不是问题，因为我们的大多数图表不在对话框窗口中，但我正在处理的图表在嵌套对话框窗口中，这意味着 z-index 为 3 在它们后面。我将通过 HighCharts 提出这一点，但目前的解决方法是将 "outside" 设置为 false。

    options: {
      exporting: { enabled: false },
      tooltip: {
        enabled: true,
        outside: false,
        useHTML: true,
        formatter: function() {
          return this.point.info;
        }
      }
    }

或者，如果您希望它与 outside=true 一起使用，那么您需要将其添加到您的 css 中（可以更改索引号但确保它很高） - ！important 是什么使它推翻了我相信的 highcharts 中的设置：

.highcharts-tooltip-container {
  z-index: 999999 !important;
}

推荐阅读