Google диаграммы "не соответствуют ни спецификации управления, ни визуализации" - PullRequest
Новая
       0

Google диаграммы "не соответствуют ни спецификации управления, ни визуализации"

4 голосов
/ 30 ноября 2011

При попытке добавить элемент управления Dashboard к работающему элементу Google Charts, я получаю «.. не соответствует ни спецификации элемента управления, ни визуализации» - это относится к линии «var dashboard = new ...» в конце.1003 * Код ниже будет работать автономно и воспроизводит всю ошибку: 

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['annotatedtimeline', 'controls']});

      google.setOnLoadCallback(drawChart);

      function drawChart() {         
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'timestamp');

            data.addColumn('number', 'Age Partnership');
            data.addColumn('number', 'Aviva');
            data.addColumn('number', 'Saga');
            data.addColumn('number', 'Global');
            data.addColumn('number', 'Bower');
            data.addColumn('number', 'Esmart');
            data.addColumn('number', 'key');


            data.addRows(3);
            data.setValue(0, 0, new Date(2011, 10, 25, 15, 21, 16, 0));data.setValue(0, 2, 1);data.setValue(0, 1, 2);data.setValue(0, 7, 3);data.setValue(0, 5, 4);data.setValue(0, 4, 5);data.setValue(0, 3, 8);data.setValue(0, 6, 10);data.setValue(1, 0, new Date(2011, 10, 26, 12, 7, 50, 0));data.setValue(1, 1, 1);data.setValue(1, 2, 2);data.setValue(1, 4, 3);data.setValue(1, 7, 4);data.setValue(1, 5, 5);data.setValue(1, 3, 7);data.setValue(1, 6, 8);data.setValue(2, 0, new Date(2011, 10, 26, 12, 15, 2, 0));data.setValue(2, 1, 1);data.setValue(2, 2, 2);data.setValue(2, 7, 3);data.setValue(2, 4, 4);data.setValue(2, 5, 5);data.setValue(2, 6, 7);data.setValue(2, 3, 8);
            var options = { 
                width: 1100, 
                height: 450, 
                title: 'Keyword Performance - equity release',
                hAxis: {title: 'Date/Time', showTextEvery: 24},
                isStacked:"true",
                dateFormat: 'HH:mm MMMM dd, yyyy'

            };

            var categoryPicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'control1',
                'options': {
                  'filterColumnLabel': 'Metric',
                  'ui': {
                    'allowTyping': false,
                    'allowMultiple': true,
                    'selectedValuesLayout': 'belowStacked'
                  }
                },
                // Define an initial state, i.e. a set of metrics to be initially selected.
                'state': {'selectedValues': [1,2,3,4,5,6,7]}
            });

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

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).bind(categoryPicker, drawChart).draw(data, options);

    }
</script>
</head>

<body>
<div id="dashboard_div"> 
  <!--Divs that will hold each control and chart-->
  <div id="control1"></div>
  <div id="chart_div0"  style="width: 1100px; height: 450px;"></div>
</div>
</body>
</html>

1 Ответ

3 голосов
/ 18 февраля 2013

Чтобы использовать элемент Dashboard, вам необходимо ввести в него элементы ChartWrapper и ControlWrapper.Прямо сейчас вы используете только ControlWrapper и пытаетесь связать его с диаграммой, не участвующей в самой панели инструментов (потому что это не ChartWrapper объект).Я попытался создать график Аннотированной временной линии как часть панели инструментов, но не смог: 

function drawVisualization() {
  // Prepare the data
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Sold Pens');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
  ]);

  // Define a slider control for the 'Donuts eaten' column
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Sold Pencils',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a time line chart
  var timeline = new google.visualization.ChartWrapper({
    'chartType': 'AnnotatedTimeLine',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 300,
    }
  });

  // Create the dashboard.
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the slider to affect the piechart
    bind(slider, timeline).
    // Draw the dashboard
    draw(data);
}

Не удалось нарисовать диаграмму (хотя элемент управления работает нормально).Возможно, поскольку диаграмма «Аннотированная временная шкала» является флэш-диаграммой, она плохо работает на панелях мониторинга.Или это может быть просто потому, что тип объекта ChartWrapper не допускает аннотированные временные линии.Если я делаю то же самое с линейным графиком, он работает: 

function drawVisualization() {
  // Prepare the data
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addColumn('number', 'Sold Pens');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
  ]);

  // Define a slider control for the 'Donuts eaten' column
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Sold Pencils',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a time line chart
  var timeline = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 300,
    }
  });

  // Create the dashboard.
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the slider to affect the piechart
    bind(slider, timeline).
    // Draw the dashboard
    draw(data);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...