1

私はグーグルチャートAPIを使用していて、その中でチャートエディタを使用しています。これをWebページに追加できる例はほとんどありませんでしたが、データURLはハードコーディングされているため、ユーザーにデータURLを指定してもらいたいので、いくつか試してみましたが、どれも機能していないようです。

HTMLコードスニペット

<div id="chartData" class="invisible">
    <div id="chartType">
        <div>Data</div>
        <div>Google Spreadsheet Url (Public)</div>
        <div>
            <input type="url" id="googleURL"/>
         </div>
         <div class="alignCenter">Or</div>
         <div>Enter your own data</div>
     </div>
</div>
<div id="googleChart" class="invisible">
   <input type='button' onclick='openEditor()' value='Open Editor'/>
    <div id='visualization' style="width:80%;height:50%;"> </div>
</div>

Javaスクリプトコード

var wrapper;
function init() {
    wrapper = new google.visualization.ChartWrapper({
        containerId: 'visualization',
        dataSourceUrl: 'https://docs.google.com/spreadsheet/ccc?key=0AivgZyecjo7adDNOVTZEUWRoU1c2YXhuSXpEcVA1a3c#gid=0',
        chartType: 'LineChart'
    });
    wrapper.draw();
}

function openEditor() {
    closeAllDialogs();
    // Handler for the "Open Editor" button.
    var editor = new google.visualization.ChartEditor();
    google.visualization.events.addListener(editor, 'ok',
        function() {
            wrapper = editor.getChartWrapper();
            wrapper.setDataSourceUrl($('googeUrl').val());
            wrapper.draw(document.getElementById('visualization'));
            openGoogleChartDialog();
        });
    editor.openDialog(wrapper);
}
google.setOnLoadCallback(init);

そこで、ここではdatasourceurlを$('#googleURL')。val();で設定する必要があります。
しかし、init関数はページの読み込み時にgoogle.setOnLoadCallback(init);によって呼び出されるようです。
とにかく変更できますか?
このコードでは、機能するコードを提供したかったので、変更を加えていません。

4

1 に答える 1

0

Google APIを使用してonLoadではなくinit()を呼び出すと、必要なイベントで役立つと思います

于 2012-10-17T08:35:48.610 に答える