Question

我正在使用reveal.js（http://lab.hakim.se/reveal-js/）和Highcharts JS，但我的工具提示位置有问题。例如，如果我在x轴上使用带有月份的行，当我将鼠标放在1月的点上时，工具提示确定，但是当我将鼠标放在12月以上时，工具提示会向我显示10月数据。每个月的工具提示越来越多。

您可以看到http://lideria.net/presentacion/index1.php来查看问题

Answer 1

reveal.js使用css缩放标记自动调整视口。如果你检查class="slides" div，你会看到类似的东西：

<div class="slides" style="width: 960px; height: 700px; zoom: 0.8331428571428572;">

此处内容（图表）缩放为正常尺寸的80％，如果图表在其控制范围之外缩放，Highcharts将失去正确计算位置的能力。

有了这些知识，quick stack overflow search谈论强制'reveal.js` to not auto-scale content的能力。

Answer 2

这可能是Highcharts的问题，我们已经报告here。还建议workaround：http://jsfiddle.net/highcharts/BD3R7/

Answer 3

您必须覆盖H.Pointer.prototype的{{1}}（引用WRAPPING UP A PLUGIN）。将以下代码添加到document.ready函数（可能在其他地方有效，我猜）。原因是：

reveal.js在缩放＆gt; 1和缩放＆lt; 1时有不同的方式，例如zoom:1.25和transform:scale(0.75)。

因此，当某个部分包含多个图表并且缩放＆gt; 1时，必须按e.chartX调整e.pageX。

(function (H) {
    H.wrap(H.Pointer.prototype, 'normalize', function (proceed, e) {
        var e = proceed.call(this,e);
        var zoom = Reveal.getScale();
        if(zoom>1) {
        var positionX = e.pageX - e.chartX;
        var positionY = e.pageY - e.chartY;
        e.chartX = Math.round((e.pageX - positionX*zoom)/zoom);
        e.chartY = Math.round((e.pageY - positionY*zoom)/zoom); 
        } else {
          e.chartX = Math.round(e.chartX/zoom);
          e.chartY = Math.round(e.chartY/zoom);
        }
      return e;
    });
}(Highcharts));

Reveal.js与highcharts

3 个答案: