apexcharts - 如何在页面加载时设置 ApexCharts 高度，然后在滚动到视图时渲染图表

Question

我有一个带有一些 ApexCharts 的项目，它们运行良好，但我想知道如何渲染图表足以在页面加载时设置高度，然后在图表滚动到视图时在图表中设置动画。

var graphs = document.querySelectorAll('[data-graph]')

for(var i = 0; i < graphs.length; i++) {
    if (isScrolledIntoView(graphs[i])) {

        if (!graphs[i].classList.contains('has-animated')) {
            graphs[i].classList.add('has-animated')

            var data = JSON.parse(graphs[i].dataset.graph)

            var chart = new ApexCharts(graphs[i], data)

            chart.render()
        }
    }
}

• isScrolledIntoView是一个检查每个项目是否在视图中的函数。
• 将is-animated类设置为仅显示每个图表一次。
• 图表中的内容在 CMS 中设置，因此数据存储在data-graph图表 div 的属性中。