Highcharts与reveal.js：如何随着幻灯片的切换更新图表？

Question

Highcharts与reveal.js：如何随着幻灯片的切换更新图表？

highchartsreveal.js

4

我想在一个reveal.js演示文稿中包含一个Highchart图形。图表集成得很好，但是当“幻灯片”还没有可见时，图表动画（例如条形图的增长）就会播放。

如何在幻灯片更改时强制进行动画“刷新”？

谢谢您的帮助！

- Timm S.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SteveP · Accepted Answer

2

一种方法是在需要启动动画时重新创建图表。

我对Reveal.js不是很了解，但看起来你可以利用幻灯片更改时触发的事件重新绘制图表以实现动画效果：

Reveal.addEventListener( 'slidechanged', function( event ) {
    redrawChart();     
} );

- SteveP

1

谢谢，这对我来说是一个很大的进步。我想我可以将它包含在我的HTML代码中的脚本标签内。我会尝试的。 - Timm S.

仍然卡住了。找到了正确的位置来放置代码（根据https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609，在`Reveal.initialize`调用下面），但似乎Highcharts不知道要重绘什么（例如`chart1.redrawChart()`）。按照我构建图表的方式，我不知道我的图表名称是什么：

$（function（）{
    $（'#container'）。highcharts（{
        chart：{
            type：'bar'
...

- Timm S.

1

chart.redraw()是正确的方法（http://api.highcharts.com/highcharts#Chart.redraw）。要获取您的图表对象，请使用`Highcharts.charts[0]`，其中`0`表示您初始化的第一个图表。在`slidechanged`事件中，您应该只需初始化它（`$（'#container'）.highcharts ...`），而不是重新绘制您的图表。 - Mark

redrawChart() 应该是你编写的一个函数，用于绘制图表。它不是一个 Highcharts 调用。只需将所有的图表绘制代码放在这个函数中，并在幻灯片更改时调用它。 - SteveP

感谢您的帮助！通过将图表代码放在slideChange事件中，我能够找到一个初始解决方案。但是，我想根据幻灯片编号使用switch语句，但我不知道如何处理它。对于第二张幻灯片上的图表，if (event.currentSlide == 1) {（或2）似乎不起作用，所以我猜测我没有正确地引用索引。 - Timm S.

看起来 event.currentSlide 应该是正确的方式。尝试在 EventListener 中记录 event.currentSlide，以查看它具有哪些值（例如 alert 或 console.log）。 - SteveP