2

Google Charts API を使用してグループ プロジェクトに統合しています。このプロジェクトは、ソーシャル メディアのトレンドなどを可視化するツールキットです。

問題は、円/棒/折れ線グラフなどを視覚化するPHPプログラムを作成したことですが、次のように宣言することによってのみ機能させることができます。

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

個々のチャートを視覚化します。ただし、ビジュアライゼーション用に個別のファイルを作成したいと考えています。つまり、drawPie、drawLine、drawBar などです。これは、作成したルール ベースのデータ タイプ ツールで動作できるようにするためです。つまり、パーセンテージと位置を円グラフに描画できます。

とにかく、個々のファイルに問題があります。以下は drawPie.js ファイルのコードです。

<html>
<head>
    <!-- Load JSAPI -->
    <script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'></script>

    <script type="text/javascript">
    //<!-- Load the API Package -->
    google.load('visualization', '1.0', {'packages':['controls']});
    //<!-- Callback when the Google Visualization API is Loaded -->
    google.setOnLoadCallback(drawDashboard);

    function drawPie() {

    //<!-- Create the Table -->
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'location');
    data.addColumn('number', 'crimes');
    data.addRows([ <?php echo $data_for_chart; ?> ]);
    //<!-- Pass Options -->
    var options = {
    'legend': 'left',
    'title': 'Crimes (per day)',
    'is3D': 'True',
    'width':700,
    'height':300
    };

    //<!-- Instantiate and Draw Chart -->
    var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
    chart.draw(data, options);
    </script>
</head>
    <body>
        <style> pie_chart {margin: 0 auto; }</style>
        <div id="pie_chart"></div>

        <style>
            #left { margin-left: 15%; float: left; }
            #right { margin-right: 15%; float: right; }
            img { width: 200; height: 200;}
        </style>
    </body>

コードはチャートを表示しません。私が間違っていることを誰かが知っていますか？前もって感謝します。

4

1 に答える 1

1

間違ったパッケージをロードしています。

に変更google.load('visualization', '1.0', {'packages':['controls']});するgoogle.load('visualization', '1.0', {'packages':['corechart']});と、動作するはずです。そうでない場合は、この (比較的単純な) 問題以外に別の問題があります。

于 2013-03-21T00:23:38.920 に答える