0

ユーザー (IE8 と IE9) が不満を持っていた Google Chart の問題を修正する任務を負っています。

基本的に、フロント エンドの「タブ」に Google Chart があります。フロント エンドの静的インスタンスを作成し (HTML をブラウザーに保存)、問題を以下の HTML に絞り込みました。

<html>
    <head>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type="text/javascript">
            function ShowSection(strSectionName){
        document.getElementById('TAB_TIME').style.backgroundColor='white';
        document.getElementById('TAB_RESPONSES').style.backgroundColor='white';

        document.getElementById('SECTION_TIME').style.display='none';
        document.getElementById('SECTION_RESPONSES').style.display='none';

        document.getElementById('TAB_'+ strSectionName).style.backgroundColor='lightblue';
        document.getElementById('SECTION_'+ strSectionName).style.display='table-row';
                }
        </script>
    </head>

    <body style="margin:20px;" onLoad="ShowSection('RESPONSES');">

        <table style="table-layout:fixed;width:1390px;" border="1" cellpadding="6" cellspacing="0">
            <tr>
                <td id="TAB_TIME"       onClick="ShowSection('TIME');">TIME SERIES</td>
                <td id="TAB_RESPONSES"      onClick="ShowSection('RESPONSES');">RESPONSES</td>
            </tr>

            <tr id="SECTION_RESPONSES">
                <td>Hello world</td>
            </tr>

            <tr id="SECTION_TIME" >
                <td align="left" valign="top">
                    <div style="border:1px solid black;" id="CHART_SALES_OVER_TIME_WEEKLY"></div>
                    <script type="text/javascript">
                          google.load("visualization", "1", {packages:["corechart"]});
                          google.setOnLoadCallback(drawChart);
                          function drawChart() {
                            var data = google.visualization.arrayToDataTable([
                              ['Dummy data', 'Sales'],
                            ['1', 1],['2', 1],['3', 3],['4', 0]
                            ]);

                            var options = {
                              height: 600,
                              width: 1370
                            };

                            var chart = new google.visualization.ColumnChart(document.getElementById('CHART_SALES_OVER_TIME_WEEKLY'));
                            chart.draw(data, options);
                          }
                    </script>
                </td>
            </tr>

        </table>
    </body>
</html>

したがって、それを起動すると、 onLoad が非表示になり、 onClick がそれらの間を切り替えることによって、(テーブルを使用して) 2 つのタブが表現されていることがわかります。

TIME SERIES「タブ」をクリックすると、x 軸と y 軸に数字が表示されるため、ほとんどのブラウザですべてが意図したとおりに機能します。ただし、IE8 および IE9 では、軸の数値は読み込まれません。唯一の例外は、 body タグを onLoad の TIME SERIES タブを指すように変更することです。

    <body style="margin:20px;" onLoad="ShowSection('TIME');">

これを行うと、IE に数値が読み込まれます。IE8 と IE9 の非互換性が原因で Google チャートが適切に読み込まれないこと (つまり、ここで何が起こっているのか!?) と、それを修正する方法を誰かに説明してもらえますか?

4

1 に答える 1

0

問題は、非表示の div 内にグラフを描画していることです。ビジュアライゼーション API では、ディメンション情報を正確に取得するために、すべてのグラフを可視の div に描画する必要があります。コードでこれを回避する簡単な方法は、「onload」イベント ハンドラーをページから削除し、チャートの「ready」イベント ハンドラーから呼び出すことです。

var chart = new google.visualization.ColumnChart(document.getElementById('CHART_SALES_OVER_TIME_WEEKLY'));
google.visualization.events.addListener(chart, 'ready', function () {
    ShowSection('RESPONSES');
});
chart.draw(data, options);

複数のチャートを操作する場合、すべてのチャートの描画が終了したときにのみタブを初期化する必要があるため、どのチャートの準備ができているかを追跡する必要があります。

var chartsReady = [];
function setupReadyEvent(chart, index) {
    chartsReady[index] = false;
    google.visualization.events.addListener(chart, 'ready', function () {
        chartsReady[index] = true;
        var allReady = true;
        for (var i = 0; i < chartsReady.length; i++) {
            allReady = allReady && chartsReady[i];
        }
        if (allReady) {
            ShowSection('RESPONSES');
        }
    });
}

setupReadyEvent(chart1, 0);
setupReadyEvent(chart2, 1);
setupReadyEvent(chart3, 2);

または、ダッシュボードを使用している場合は、ダッシュボードの「準備完了」イベントをトリガーできます。

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
google.visualization.events.addListener(dashboard, 'ready', function () {
    ShowSection('RESPONSES');
});
// bind charts and controls in Dashboard, eg:
dashboard.bind([control], [chart]);
dashboard.draw(data, options);
于 2013-09-24T15:03:12.310 に答える