JQuery循环中的多个Google图表

Multiple Google Charts inside JQuery Cycle

本文关键字：Google 图表 循环 JQuery      更新时间：2023-09-26

我正在尝试创建一个包含两个谷歌图表的循环/滑块。我可以用下面的代码在页面上单独显示它们，但当空间变得非常宝贵时，我决定使用滑块/循环。使用以下代码。第一个图表绘制，但当第二个滚动到视图中时。没有图表。它只说：无法在Chrome上获取未定义或null引用的属性"length"：无法读取null的属性"length"。我意识到，当一个图表可见时，另一个就不可见了。但我对javascript的不熟悉使我很难找到一个答案，在适当的时间将display:'block'转换为display:'none。任何帮助都将不胜感激。

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        function drawCharts() {
            var data1 = google.visualization.arrayToDataTable(<% =jsostring%>);
            var options1 = {
                title: 'PSNL Weight Chart',
                backgroundColor: {fill:'none'}
            };
            var data2 = google.visualization.arrayToDataTable(<% =jsostring2%>);
            var options2 = {
                title: 'PSNL Sleep Chart',
                backgroundColor: {fill:'none'}
            };
            var chartA = new google.visualization.LineChart(document.getElementById('chart_div'));
            chartA.draw(data1, options1);
            var chartB = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
            chartB.draw(data2, options2);
        }
        google.setOnLoadCallback(drawCharts);
        google.load("visualization", "1", { packages: ["corechart"] });
       </script>

我想答案是非常基本的。我不是一个爪哇人。我搜索并思考了一下。我在另一个网站上找到的答案是：

   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        function drawCharts() {
            var data1 = google.visualization.arrayToDataTable(<% = jsostring%>);
            var options1 = {
                title: 'PSNL Weight Chart',
                backgroundColor: {fill:'none'}
            };
            var data2 = google.visualization.arrayToDataTable(<% = jsostring2%>);
            var options2 = {
                title: 'PSNL Sleep Chart',
                backgroundColor: {fill:'none'}
            };
            var chartA = new google.visualization.LineChart(document.getElementById('chart_div'));
            document.getElementById('chart_div').style.display = 'block';
            document.getElementById('chart_div2').style.display = 'none';
            chartA.draw(data1, options1);
            var chartB = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
            document.getElementById('chart_div2').style.display = 'block';
            document.getElementById('chart_div').style.display = 'none';
            chartB.draw(data2, options2);
        }
        google.setOnLoadCallback(drawCharts);
        google.load("visualization", "1", { packages: ["corechart"] });
</script>

当jquery滚动时。它将在滚动到视图中之前打开第一个Div_Chart并关闭另一个。

相关文章：