0

我试图将两个谷歌图表放在一个网页上，但只能让它绘制第一个而不是另一个。谁能看看我做错了什么？

我正在使用两个不同的 div 进行绘图，我认为这是重要的一步。我还尝试对不同的图使用两种不同的函数，但仍然无法正常工作。

我将非常感谢有用的建议。

谢谢！！

阿耶莎

<!--To change this template, choose Tools | Templates and open the template in the editor.-->
<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load('visualization', '1', {'packages':['annotatedtimeline']});
        google.setOnLoadCallback(drawChart1);
        function drawChart1() {

            var data1 = new google.visualization.DataTable();
            data1.addColumn('date', 'Date');
            data1.addColumn('number', 'Sold Pencils');
            data1.addColumn('string', 'title1');
            data1.addColumn('string', 'text1');
            data1.addColumn('number', 'Sold Pens');
            data1.addColumn('string', 'title2');
            data1.addColumn('string', 'text2');
            data1.addRows([
                [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
                [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
                [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
                [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
                [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
                [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
            ]);

            var chart1 = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
            chart1.draw(data1, {displayAnnotations: true});

            var data2 = google.visualization.arrayToDataTable([
                ['Year', 'Sales', 'Expenses'],
                ['2004',  1000,      400],
                ['2005',  1170,      460],
                ['2006',  660,       1120],
                ['2007',  1030,      540]
            ]);

            var options = {
                title: 'Company Performance',
                vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
            };

            var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
            chart2.draw(data2, options);

        }
    </script>
</head>

<body>
    <p> Testing Google line chart tool </p>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div1' style='width: 700px; height: 240px;'></div>

    <br> <br> <br> 

    <p> Testing another chart </p>
    <div id='chart_div2' style='width: 700px; height: 240px;'></div>

</body>
</html>

阿耶莎

4

1 回答 1

1

加载包时包括corechart。

google.load('visualization', '1', 
{'packages':['annotatedtimeline','corechart']});

见这里：http: //jsfiddle.net/Ng7ne/

于 2012-05-15T20:22:24.010 回答