尝试在单个页面上显示多个Google图表时出错

时间:2015-05-07 16:39:49

标签: javascript html5 charts google-visualization

我已经调查过本网站上发布的有关此问题的各种问题。但是,我的问题略有不同。我有以下javascript代码:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1.1", {packages:["corechart", "bar"]});
            google.setOnLoadCallback(drawChart);

            function drawChart() 
            {
                var data = google.visualization.arrayToDataTable([
                    ['Dept.', 'Actual strength'],
                    ['Computer Sc. & Engineering', 20],
                    ['Mechanical Engineering',     15],
                    ['Electrical Engineering',     13],
                    ['Humanities & Social Sc',     15]
                ]);

                var options1 = {
                    'title': 'Department wise distribution of faculties',
                    'is3D': true
                };
                var chart1 = new google.visualization.PieChart(document.getElementById("instStat1_1"));
                chart1.draw(data, options1);

                var options2 = {
                    chart: {
                        title: 'Sanctioned vs Actual Department Analysis'
                    }
                };
                var chart2 = new google.charts.Bar(document.getElementById("instStat1_2"));
                chart2.draw(data, options2);



                var data1 = google.visualization.arrayToDataTable([
                  ['Year', 'Sales', 'Expenses', 'Profit'],
                  ['2014', 1000, 400, 200],
                  ['2015', 1170, 460, 250],
                  ['2016', 660, 1120, 300],
                  ['2017', 1030, 540, 350]
                ]);

                var options = {
                    chart: {
                  title: 'Company Performance',
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017',
                }
                };

                var chart = new google.charts.Bar(document.getElementById('deptStat3'));

                chart.draw(data1, options);
            }
        </script>

问题是前两个图表正在显示。 HOwever,在与第三张图表对应的div中有一条小的红色“错误”消息。在单个网页上运行时的第三个图表正确显示(它实际上与displayed here on official google site相同)。以下是我的div元素:

<div class="well">
    <div id="deptStat3" style="width: 100%; height: 500px;"></div>
</div>

有人可以帮我找出错误吗?

更新 在Chrome中渲染时,相同的图形会部分渲染,而不是完全渲染,尽管比所提到的高度小得多。顺便说一句,我正在使用“材料列图表”作为第3张图。

0 个答案:

没有答案