Ошибка загрузки диаграмм google диаграмм

Этот вопрос может быть самым глупым из всех, однако я пытаюсь просто выполнить запуск кода, который находится непосредственно с сайта google chart guide, и на удивление его не работает.Ошибка загрузки диаграмм google диаграмм

У меня копия вставила код из приведенного ниже URL-адреса и попыталась запустить его в браузере Firefox. Это дало мне ошибку ниже, и я тоже не смог найти ошибку в журнале. Не уверен, что пошло не так. Код Источник: https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards

Код

<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>

Ошибка:

источник

2016-07-02 Ramu

документация и примеры весьма несвежий в этой точке.
с последними выпусками loader.js, для работы диаграмм необходимо включить пакет 'corechart'.

см следующий, рабочий пример ...

// 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>

источник

2016-07-02 14:49:47 WhiteHat

код работает как шарм. Спасибо за ваше время и силы. Я предполагаю, что, поскольку я использовал один из типов диаграмм corechart (bar, column, line, area, stepped area, bubble, pie, donut, combo, подсвечник, гистограмма, разброс), я должен загрузить пакет как зависимость. Мне нужен пакет управления, поскольку я использовал, у меня есть NumberRangeFilter. – Ramu

Ошибка загрузки диаграмм google диаграмм

ответ

Смежные вопросы