0

1つのWebページに2つのGoogleグラフを配置しようとしていますが、最初のグラフのみをプロットし、もう一方はプロットできません。誰かが私が間違っていることを見て見ることができますか？

私はプロットに2つの異なるdivを使用していますが、これは重要なステップだと思いました。また、プロットごとに2つの異なる関数を使用してみましたが、それでも機能しませんでした。

有益な提案をいただければ幸いです。

ありがとう！！

アイシャ

<!--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

パッケージをロードするときにコアチャートを含めます。

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

ここを参照してください：http：//jsfiddle.net/Ng7ne/

于 2012-05-15T20:22:24.010 に答える