RevealJS和Highchart鼠标位置工具提示问题

Question

我刚刚建立了我的第一个RevealJS演示文稿，尽管所有功能似乎一目了然，但我遇到了HighChart的游戏突破性问题，该问题是由RevealJS缩放/移动，元素和SVG相关的方式引起的（至少我是这么认为的）。

这里有一个类似的问题报告，至少看起来似乎相关，尽管我无法解决我的问题，因为建议的代码不是插件 ，并且我的JS技能充其量缺乏-> SVG中的鼠标位置和RevealJS

我希望有人可以帮助我确定一个潜在的解决方案，也许可以轻松地适应其他堆栈的解决方案（我确实需要缩放功能，我知道我可以使用一个百分比选项来初始化RevealJS，但这将有效地打破任何较小的缩放设备）。

这是似乎相关的代码部分，在我的情况下，第二个其他if( scale > 1 && features.zoom ) { ... }被触发，并且缩放会根据分辨率产生不良的偏移量。

var size = getComputedSlideSize();

        // Layout the contents of the slides
        layoutSlideContents( config.width, config.height );

        dom.slides.style.width = size.width + 'px';
        dom.slides.style.height = size.height + 'px';

        // Determine scale of content to fit within available space
        scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );

        console.log("Size:"+size.presentationWidth);
        console.log("Size:"+size.width);


        console.log("1:"+scale);


        // Respect max/min scale settings
        scale = Math.max( scale, config.minScale );
        console.log("2:"+scale);
    scale = Math.min( scale, config.maxScale );
        console.log("3:"+scale);


        // Don't apply any scaling styles if scale is 1
        if( scale === 1 ) {
            dom.slides.style.zoom = '';
            dom.slides.style.left = '';
            dom.slides.style.top = '';
            dom.slides.style.bottom = '';
            dom.slides.style.right = '';
            transformSlides( { layout: '' } );
        }
        else {
            // Prefer zoom for scaling up so that content remains crisp.
            // Don't use zoom to scale down since that can lead to shifts
            // in text layout/line breaks.
            if( scale > 1 && features.zoom ) {
                dom.slides.style.zoom = scale;
                dom.slides.style.left = '';
                dom.slides.style.top = '';
                dom.slides.style.bottom = '';
                dom.slides.style.right = '';
                transformSlides( { layout: '' } );
            }
            // Apply scale transform as a fallback
            else {
                dom.slides.style.zoom = '';
                dom.slides.style.left = '50%';
                dom.slides.style.top = '50%';
                dom.slides.style.bottom = 'auto';
                dom.slides.style.right = 'auto';
                transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
            }
        }

我创建了一个Codepen来说明问题，将其从小到最大调整大小并检查鼠标的工具提示，除了比例为1：1时，鼠标的位置与显示的工具提示点之间会有小到大的偏移量。

https://codepen.io/anon/pen/MVLazG

任何帮助都将受到欢迎。 如果有一种方法可以保留更好的鼠标位置来处理图形，我将不胜感激建议和代码（用其他方法敲了几个小时没碰运气）。

Answer 1

这是由在包装div上设置transform的scale引起的。 您可以在此处在Highcharts github上了解更多信息。

有一个解决方法，在您的示例中似乎可以解决：

Highcharts.wrap(Highcharts.Pointer.prototype, 'normalize', function (proceed, event, chartPosition) {
    var e = proceed.call(this, event, chartPosition);

    var element = this.chart.container;
    if (element && element.offsetWidth && element.offsetHeight) {

        var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
        var scaleY = element.getBoundingClientRect().height / element.offsetHeight;
        if (scaleX !== 1) {
            e.chartX = parseInt(e.chartX / scaleX, 10);
        }
        if (scaleY !== 1) {
            e.chartY = parseInt(e.chartY / scaleY, 10);
        }

    }
    return e;
});

实时示例： https ： //codepen.io/anon/pen/GxzPKq