Reveal.js с highcharts

Question

Я использую open.js (http://lab.hakim.se/reveal-js/) вместе с Highcharts JS, но у меня проблемы с положением всплывающих подсказок. Например, если я использую строку с месяцами по оси x, когда я нажимаю мышь над точкой в ​​январе, всплывающая подсказка его ок, но когда я нажимаю мышь на декабрь, всплывающая подсказка показывает мне данные октября. Всплывающая подсказка для каждого месяца смещается все больше и больше.

Вы можете увидеть http://lideria.net/presentacion/index1.php увидеть проблему

Answer 1

Возможно, это проблема с Highcharts, о которой мы уже сообщали here. Также предлагается workaround: http://jsfiddle.net/highcharts/BD3R7/

Answer 2

reveal.js autoscales окно просмотра с помощью CSS масштабирования тега. Если вы проверяете class="slides" DIV, вы увидите что-то вроде этого:

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

Здесь содержания (графика) масштабируется 80% от нормального размера и Highcharts теряет его способность вычислять позиции должным образом, если график масштабируется снаружи его контроля.

Говоря об этом, quick stack overflow search говорит о возможности силой «показать.js» to not auto-scale content.

Answer 3

Вы должны перезаписать normalize в H.Pointer.prototype (ссылка WRAPPING UP A PLUGIN). Добавьте следующий код в функцию document.ready (возможно, где-то еще работает, я думаю). Причины:

1. reveal.js имеет отдельные пути, когда зум> 1 и увеличение < 1, например, zoom:1.25 и transform:scale(0.75).

2. Итак, если раздел имеет несколько диаграмм и масштабирование> 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));