揭示JS和高图表鼠标位置工具提示问题

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 +')' } );
}
}

我创建了一个代码笔来说明这个问题，将其大小从小到最大大小调整并检查鼠标工具提示，鼠标所在的位置和工具提示点显示的偏移量会很小，除非比例为 1：1。

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

欢迎任何和所有帮助。如果有一种方法可以保持更好的鼠标位置来处理图形，我将不胜感激建议和代码(在不同的方法上撞了几个小时没有运气)。

Answer 1

它是由在包装div 上设置转换的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