Google TableChart spielt nicht gut mit anderen Charts auf Seite

Ich muss ein Google-Tabelle Diagramm koexistieren mit einem anderen Google-Diagramm auf der gleichen Seite, aber leider ist dies nicht passiert. Ich benutze nur Demo-Code-Bits, ich kann andere Google-Charts koexistieren auf der gleichen Seite, aber nicht ein Tabellendiagramm. Es wurden mehrere Fragen gestellt und mit anderen Diagrammtypen beantwortet, aber nicht mit Tabellen. Es scheint ein Fehler für dieses Diagramm zu sein. Ich benutze die "aktuelle" Version zu Google-Charts, von denen ich glaube, dass sie ab dem 15.07.2016 43 sind.Google TableChart spielt nicht gut mit anderen Charts auf Seite

Der Fehler tritt auf der Linie gegen Ende des Codeblocks an der Linie auf; "var table = new google.visualization.Table (document.getElementById ('table_div'));"

wo die Ausnahme ist; „Nicht behandelte Ausnahme in Zeile 51, Spalte 13 in http://localhost:62064/test.html 0x800a01bd - JavaScript-Laufzeitfehler: Objekt unterstützt diese Aktion nicht“

--- Code beginnt, ist dies eine komplette Beispiel Web-Seite für das Problem ---

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>My Test Google Charts Page</title> 
    <!--Include for chart support--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

    <script type="text/javascript"> 
     google.charts.load("current", { packages: ["corechart"] }); 
     google.charts.setOnLoadCallback(drawChart); 
     google.charts.setOnLoadCallback(drawTable); 

     function drawChart() { 
         var data = google.visualization.arrayToDataTable([ 
         ['ID', 'X', 'Y', 'Temperature'], 
         ['', 80, 167, 120], 
         ['', 79, 136, 130], 
         ['', 78, 184, 50], 
         ['', 72, 278, 230], 
         ['', 81, 200, 210], 
         ['', 72, 170, 100], 
         ['', 68, 477, 80] 
        ]); 

        var options = { 
         colorAxis: { colors: ['yellow', 'red'] } 
        }; 

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

       function drawTable() { 
        var data = new google.visualization.DataTable(); 
        //debugger; 
        data.addColumn('string', 'Name'); 
        data.addColumn('number', 'Salary'); 
        data.addColumn('boolean', 'Full Time Employee'); 
        data.addRows([ 
         ['Mike', { v: 10000, f: '$10,000' }, true], 
         ['Jim', { v: 8000, f: '$8,000' }, false], 
         ['Alice', { v: 12500, f: '$12,500' }, true], 
         ['Bob', { v: 7000, f: '$7,000' }, true] 
        ]); 

        var table = new google.visualization.Table(document.getElementById('table_div')); 
        table.draw(data, { showRowNumber: true, width: '100%' }); 
       } 
     </script> 

    </head> 

    <body> 
     <!--Table and divs that hold the pie charts--> 
     <table class="columns"> 
      <tr> 
       <td><div id="chart_div" style="width: 900px; height: 500px;"></div></td> 

      </tr> 
      <tr> 
        <td><div id="table_div" style="width: 900px; height: 500px;"></div></td> 
      </tr> 
     </table> 

    </body> 
    </html>

--- Code ends--

Quelle

2016-07-15 Temporal Anxiety

keine Notwendigkeit für setOnLoadCallback für jedes Diagramm,
dies nur einmal sowieso pro Seite aufgerufen werden soll ...

hier, schließe ich die callback in der load Aussage,
, die beide Charts zieht ...

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['ID', 'X', 'Y', 'Temperature'], 
 
     ['', 80, 167, 120], 
 
     ['', 79, 136, 130], 
 
     ['', 78, 184, 50], 
 
     ['', 72, 278, 230], 
 
     ['', 81, 200, 210], 
 
     ['', 72, 170, 100], 
 
     ['', 68, 477, 80] 
 
    ]); 
 

 
    var options = { 
 
     colorAxis: { colors: ['yellow', 'red'] } 
 
    }; 
 

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

 
    var data = new google.visualization.DataTable(); 
 
    //debugger; 
 
    data.addColumn('string', 'Name'); 
 
    data.addColumn('number', 'Salary'); 
 
    data.addColumn('boolean', 'Full Time Employee'); 
 
    data.addRows([ 
 
     ['Mike', { v: 10000, f: '$10,000' }, true], 
 
     ['Jim', { v: 8000, f: '$8,000' }, false], 
 
     ['Alice', { v: 12500, f: '$12,500' }, true], 
 
     ['Bob', { v: 7000, f: '$7,000' }, true] 
 
    ]); 
 

 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
 
    table.draw(data, { showRowNumber: true, width: '100%' }); 
 
    }, 
 
    packages: ['corechart', 'table'] 
 
});

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<table class="columns"> 
 
    <tr> 
 
    <td><div id="chart_div" style="width: 900px; height: 500px;"></div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div id="table_div" style="width: 900px; height: 500px;"></div></td> 
 
    </tr> 
 
</table>

Quelle

2016-07-15 22:32:12 WhiteHat

Thanks so much, Das hat den Trick gemacht. –

Prost! Froh, dass ich Helfen kann... – WhiteHat

Google TableChart spielt nicht gut mit anderen Charts auf Seite

Antwort

Verwandte Themen