Google Visualization图表/信息中心无法完全绘制

时间:2013-11-13 00:24:27

标签: javascript google-visualization

我正在使用Google Visualizations构建一个仪表板,它将以图表,时间序列和表格形式显示许多不同的数据集合(为了完整起见,html是由Python生成的,尽管我不认为这与我的问题有关)。我自己处理表格,它们工作正常,我还没有实现图表,尽管我为之前的迭代构建了略微不同的图表。有了上下文,我的问题来自时间序列:页面成功显示过滤器(即“度量”和“类别”及相关的下拉列表),但不是行图,并给出错误“一个或多个参与者没能画()。“每次选择过滤器时,都会显示另一个相同的错误。

这是我的(匿名)代码,带有相关的html:

<div class="time" id="conttime"><div id="contlinetime"></div><div id="cont_met"></div><div id="cont_cat"></div></div>
<script type="text/javascript">
      google.load('visualization', '1.1', {'packages':['corechart', 'controls']});
      function drawVisualization() {var contMetFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId':'cont_met',
    'options': {
      'filterColumnLabel': 'Metric',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone' : false
      }
    }
  });var contCatFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId':'cont_cat',
    'options': {
      'filterColumnLabel': 'Category',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone' : false,
      }
    }
  });   var obj = [
    [new Date(2013, 11, 12), 25651, 'Sample Metric #1', 'Sample Category #1'],
    [new Date(2013, 11, 11), 25651, 'Sample Metric #1', 'Sample Category #1'],
    [new Date(2013, 11, 10), 25651, 'Sample Metric #1', 'Sample Category #1'],
    [new Date(2013, 11, 09), 25681, 'Sample Metric #1', 'Sample Category #1'],
    [new Date(2013, 11, 08), 25681, 'Sample Metric #1', 'Sample Category #1'],
    [new Date(2013, 11, 12), 55, 'Sample Metric #1', 'Sample Category #2'],
    [new Date(2013, 11, 11), 55, 'Sample Metric #1', 'Sample Category #2'],
    [new Date(2013, 11, 10), 55, 'Sample Metric #1', 'Sample Category #2'],
    [new Date(2013, 11, 09), 55, 'Sample Metric #1', 'Sample Category #2'],
    [new Date(2013, 11, 08), 55, 'Sample Metric #1', 'Sample Category #2'],
    [new Date(2013, 11, 12), 5120, 'Sample Metric #1', 'Sample Category #3'],
    [new Date(2013, 11, 11), 5120, 'Sample Metric #1', 'Sample Category #3'],
    [new Date(2013, 11, 10), 5120, 'Sample Metric #1', 'Sample Category #3'],
    [new Date(2013, 11, 09), 4961, 'Sample Metric #1', 'Sample Category #3'],
    [new Date(2013, 11, 08), 4961, 'Sample Metric #1', 'Sample Category #3'],
    [new Date(2013, 11, 12), 26389, 'Sample Metric #2', 'Sample Category #1'],
    [new Date(2013, 11, 11), 26389, 'Sample Metric #2', 'Sample Category #1'],
    [new Date(2013, 11, 10), 26389, 'Sample Metric #2', 'Sample Category #1'],
    [new Date(2013, 11, 09), 26417, 'Sample Metric #2', 'Sample Category #1'],
    [new Date(2013, 11, 08), 26417, 'Sample Metric #2', 'Sample Category #1'],
    [new Date(2013, 11, 12), 55, 'Sample Metric #2', 'Sample Category #2'],
    [new Date(2013, 11, 11), 55, 'Sample Metric #2', 'Sample Category #2'],
    [new Date(2013, 11, 10), 55, 'Sample Metric #2', 'Sample Category #2'],
    [new Date(2013, 11, 09), 55, 'Sample Metric #2', 'Sample Category #2'],
    [new Date(2013, 11, 08), 55, 'Sample Metric #2', 'Sample Category #2'],
    [new Date(2013, 11, 12), 5793, 'Sample Metric #2', 'Sample Category #3'],
    [new Date(2013, 11, 11), 5793, 'Sample Metric #2', 'Sample Category #3'],
    [new Date(2013, 11, 10), 5793, 'Sample Metric #2', 'Sample Category #3'],
    [new Date(2013, 11, 09), 5565, 'Sample Metric #2', 'Sample Category #3'],
    [new Date(2013, 11, 12), 119398, 'Sample Metric #3', 'Sample Category #1'],
    [new Date(2013, 11, 11), 119398, 'Sample Metric #3', 'Sample Category #1'],
    [new Date(2013, 11, 10), 119398, 'Sample Metric #3', 'Sample Category #1'],
    [new Date(2013, 11, 09), 119505, 'Sample Metric #3', 'Sample Category #1'],
    [new Date(2013, 11, 08), 119505, 'Sample Metric #3', 'Sample Category #1'],
    [new Date(2013, 11, 12), 56, 'Sample Metric #3', 'Sample Category #2'],
    [new Date(2013, 11, 11), 56, 'Sample Metric #3', 'Sample Category #2'],
    [new Date(2013, 11, 10), 56, 'Sample Metric #3', 'Sample Category #2'],
    [new Date(2013, 11, 09), 56, 'Sample Metric #3', 'Sample Category #2'],
    [new Date(2013, 11, 08), 56, 'Sample Metric #3', 'Sample Category #2'],
    [new Date(2013, 11, 12), 7360, 'Sample Metric #3', 'Sample Category #3'],
    [new Date(2013, 11, 11), 7360, 'Sample Metric #3', 'Sample Category #3'],
    [new Date(2013, 11, 10), 7360, 'Sample Metric #3', 'Sample Category #3'],
    [new Date(2013, 11, 09), 7108, 'Sample Metric #3', 'Sample Category #3'],
    [new Date(2013, 11, 08), 7108, 'Sample Metric #3', 'Sample Category #3']];
         var data = new google.visualization.DataTable();
         data.addColumn('date', 'Date');
         data.addColumn('number', 'Count');
         data.addColumn('string', 'Metric');
         data.addColumn('string', 'Category');
         data.addRows(obj);
      var lineChart = new google.visualization.ChartWrapper({
         chartType: 'LineChart',
         containterId: 'contlinetime',
         'view': {'columns': [0, 1]},
         options: {
             'chartArea': {'height': '80%', 'width': '80%'},
             'hAxis': {'slantedText': false},
             'curveType': "line",
             'pointSize': 3,
             'legend': {'position': 'none'}}});
    new google.visualization.Dashboard(document.getElementById('conttime')).
    bind([contMetFilter, contCatFilter], lineChart).
    draw(data);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>

我查看了stackOverflow和Google Groups档案,我找到了其他有这个问题的人,虽然从我能说的问题和解决方案与我所面临的不同。最后,我还没有真正使用除了似乎可能解决我的问题的选项之外的选项,所以我并不特别关心这些图表的可读性,而是实际创建这些图表。谢谢!

1 个答案:

答案 0 :(得分:0)

折线图的ChartWrapper中有一个拼写错误:containterId不应该有两个t。将其更改为containerId,您的代码可以正常运行。