在响应式移动版本的图表底部显示 Highcharts 工具提示

Question

我有这个折线图，在图表右侧显示所有系列的共享工具提示。然而，在移动视图中，它看起来很丑，因为一半的屏幕空间被图表占据，一半被工具提示占据。在移动响应式布局中，我希望图表占据整个屏幕宽度并共享工具提示转到图表底部。我怎样才能实现这个目标？

我写了下面的代码，它可以在 jsfiddle 上运行。

responsive: {
    rules: [{
      chartOptions: {
        chart: {
          marginRight: 0
        },
        tooltip: {
        outside: true,
          positioner: function(boxWidth, boxHeight, point) {
            var chart = this.chart; // get plotTop;

            return {
              x: chart.plotLeft + chart.plotSizeX - 100,
              y: chart.chartHeight - chart.plotTop - chart.xAxis[0].bottom + boxHeight + 50
            };
          }
        }
      },
      condition: {
        maxWidth: 640
      }
    }]
  }

https://jsfiddle.net/userMB/k790c4rw/4/

但问题是我的图表包含在一个容器 div 内，该容器 div 进一步包含在一个部分内。就像下面的代码一样：因此，工具提示没有按照我想要的方式显示在图表下方。我有什么想法可以实现这一目标吗？

<section class="section section-lg ">
    <div class="container" style="max-width: 95vw; border: 1px solid grey; min-height: 65vh;">
        <"some form">
        <div id="chart" style="min-height: 50vh;"></div>
    </div>
<section>

相同的代码在封闭的部分和 div 元素中的行为有所不同。请参阅 https://jsfiddle.net/userMB/k790c4rw/10

Answer 1

您可以使用响应式规则并为小屏幕定义不同的选项。例如：

  responsive: {
    rules: [{
      chartOptions: {
        chart: {
          marginRight: 0
        },
        tooltip: {
          positioner: function(boxWidth, boxHeight, point) {
            var chart = this.chart; // get plotTop;

            return {
              x: chart.plotLeft + chart.plotSizeX - 100,
              y: chart.plotTop + chart.plotSizeY - 50
            };
          }
        }
      },
      condition: {
        maxWidth: 640
      }
    }]
  }

---

现场演示： https://jsfiddle.net/BlackLabel/w4qsjpy7/

API 参考： https://api.highcharts.com/highcharts/responsive.rules