google charts armaturenbrett load scheitern

Diese Frage könnte die dümmste von allen sein, aber ich versuche, nur den Code ausführen, der direkt von Google Charts Guide Website ist und überraschend funktioniert nicht.google charts armaturenbrett load scheitern

Ich habe Kopie den Code aus der folgenden URL eingefügt und versucht, es in Firefox Browser ausführen. Es gab mir einen Fehler und ich konnte keinen Fehler im Log finden. Nicht sicher, was schief gelaufen ist. -Code Quelle: https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards

-Code

<html> 
<head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the controls package. 
     google.charts.load('current', {'packages':['controls']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawDashboard); 

     // Callback that creates and populates a data table, 
     // instantiates a dashboard, a range slider and a pie chart, 
     // passes in the data and draws it. 
     function drawDashboard() { 

     // Create our data table. 
     var data = google.visualization.arrayToDataTable([ 
      ['Name', 'Donuts eaten'], 
      ['Michael' , 5], 
      ['Elisa', 7], 
      ['Robert', 3], 
      ['John', 2], 
      ['Jessica', 6], 
      ['Aaron', 1], 
      ['Margareth', 8] 
     ]); 

     // Create a dashboard. 
     var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div')); 

     // Create a range slider, passing some options 
     var donutRangeSlider = new google.visualization.ControlWrapper({ 
      'controlType': 'NumberRangeFilter', 
      'containerId': 'filter_div', 
      'options': { 
      'filterColumnLabel': 'Donuts eaten' 
      } 
     }); 

     // Create a pie chart, passing some options 
     var pieChart = new google.visualization.ChartWrapper({ 
      'chartType': 'PieChart', 
      'containerId': 'chart_div', 
      'options': { 
      'width': 300, 
      'height': 300, 
      'pieSliceText': 'value', 
      'legend': 'right' 
      } 
     }); 

     // Establish dependencies, declaring that 'filter' drives 'pieChart', 
     // so that the pie chart will only display entries that are let through 
     // given the chosen slider range. 
     dashboard.bind(donutRangeSlider, pieChart); 

     // Draw the dashboard. 
     dashboard.draw(data); 
     } 
    </script> 
</head> 

<body> 
    <!--Div that will hold the dashboard--> 
    <div id="dashboard_div"> 
     <!--Divs that will hold each control and chart--> 
     <div id="filter_div"></div> 
     <div id="chart_div"></div> 
    </div> 
</body> 
</html>

Fehler:

Quelle

2016-07-02 Ramu

die Dokumentation und Beispiele sind ziemlich abgestanden an dieser Stelle.
mit den letzten Versionen von loader.js muss das 'corechart'-Paket enthalten sein, damit die Diagramme funktionieren.

siehe folgende, Arbeitsbeispiel ...

// Load the Visualization API and the controls package. 
 
google.charts.load('current', {'packages':['controls', 'corechart']}); 
 

 
// Set a callback to run when the Google Visualization API is loaded. 
 
google.charts.setOnLoadCallback(drawDashboard); 
 

 
// Callback that creates and populates a data table, 
 
// instantiates a dashboard, a range slider and a pie chart, 
 
// passes in the data and draws it. 
 
function drawDashboard() { 
 

 
    // Create our data table. 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Name', 'Donuts eaten'], 
 
    ['Michael' , 5], 
 
    ['Elisa', 7], 
 
    ['Robert', 3], 
 
    ['John', 2], 
 
    ['Jessica', 6], 
 
    ['Aaron', 1], 
 
    ['Margareth', 8] 
 
    ]); 
 

 
    // Create a dashboard. 
 
    var dashboard = new google.visualization.Dashboard(
 
     document.getElementById('dashboard_div')); 
 

 
    // Create a range slider, passing some options 
 
    var donutRangeSlider = new google.visualization.ControlWrapper({ 
 
    'controlType': 'NumberRangeFilter', 
 
    'containerId': 'filter_div', 
 
    'options': { 
 
     'filterColumnLabel': 'Donuts eaten' 
 
    } 
 
    }); 
 

 
    // Create a pie chart, passing some options 
 
    var pieChart = new google.visualization.ChartWrapper({ 
 
    'chartType': 'PieChart', 
 
    'containerId': 'chart_div', 
 
    'options': { 
 
     'width': 300, 
 
     'height': 300, 
 
     'pieSliceText': 'value', 
 
     'legend': 'right' 
 
    } 
 
    }); 
 

 
    // Establish dependencies, declaring that 'filter' drives 'pieChart', 
 
    // so that the pie chart will only display entries that are let through 
 
    // given the chosen slider range. 
 
    dashboard.bind(donutRangeSlider, pieChart); 
 

 
    // Draw the dashboard. 
 
    dashboard.draw(data); 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<!--Div that will hold the dashboard--> 
 
<div id="dashboard_div"> 
 
    <!--Divs that will hold each control and chart--> 
 
    <div id="filter_div"></div> 
 
    <div id="chart_div"></div> 
 
</div>

Quelle

2016-07-02 14:49:47 WhiteHat

Der Code funktioniert wie ein Charme. Danke für deine Zeit und Mühe. Ich denke, da ich einen der Diagrammtypen von CoreChart (Balken, Spalte, Linie, Fläche, abgestufter Bereich, Blase, Torte, Donut, Combo, Leuchter, Histogramm, Scatter) verwendet habe, sollte ich das Paket als Abhängigkeit laden. Ich brauche Controls-Paket, wie ich verwendet habe ich NumberRangeFilter. – Ramu

google charts armaturenbrett load scheitern

Antwort

Verwandte Themen