Javascript 谷歌可视化图表/仪表盘无法完全绘制

Javascript 谷歌可视化图表/仪表盘无法完全绘制,javascript,google-visualization,Javascript,Google Visualization,我正在使用Google Visualizations构建一个仪表板,它将以图表、时间序列和表格的形式显示许多不同的数据集合(为了完整起见,html是由Python生成的,尽管我认为这与我的问题无关)。我自己处理这些表,它们工作得很好,我还没有实现这些图表,尽管我为上一次迭代构建了稍微不同的图表。在这种情况下,我的问题来自时间序列:页面成功地显示了过滤器(即“Metric”和“Category”以及相关的下拉列表),但没有显示线图,并给出错误“一个或多个参与者未能绘制()。每次选择过滤器时,都会显

我正在使用Google Visualizations构建一个仪表板,它将以图表、时间序列和表格的形式显示许多不同的数据集合(为了完整起见,html是由Python生成的,尽管我认为这与我的问题无关)。我自己处理这些表,它们工作得很好,我还没有实现这些图表,尽管我为上一次迭代构建了稍微不同的图表。在这种情况下,我的问题来自时间序列:页面成功地显示了过滤器(即“Metric”和“Category”以及相关的下拉列表),但没有显示线图,并给出错误“一个或多个参与者未能绘制()。每次选择过滤器时,都会显示另一个相同的错误

以下是我的(匿名)代码,以及相关的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>

load('visualization','1.1',{'packages':['corechart','controls']});
函数drawVisualization(){var contMetFilter=new google.visualization.ControlWrapper({
“controlType”:“CategoryFilter”,
“集装箱运输”:cont_met,
“选项”:{
'filterColumnLabel':'Metric',
“用户界面”:{
“标签固定”:“垂直”,
“allowTyping”:false,
“allowMultiple”:false,
“AllowOne”:错误
}
}
});var contCatFilter=new google.visualization.ControlWrapper({
“controlType”:“CategoryFilter”,
“集装箱运输”:“集装箱运输”,
“选项”:{
“filterColumnLabel”:“类别”,
“用户界面”:{
“标签固定”:“垂直”,
“allowTyping”:false,
“allowMultiple”:false,
“AllowOne”:错误,
}
}
});var obj=[
[新日期(2013年11月12日),25651,“样本指标1”,“样本类别1”,
[新日期(2013年11月11日),25651,“样本指标1”,“样本类别1'],
[新日期(2013年11月10日),25651,“样本指标1”,“样本类别1”,
[新日期(2013年11月9日),25681,“样本度量#1”,“样本类别#1'],
[新日期(2013年11月8日),25681,“样本指标1”,“样本类别1”,
[新日期(2013年11月12日),55,'样本度量#1','样本类别#2'],
[新日期(2013年11月11日),55,'样本度量#1','样本类别#2'],
[新日期(2013年11月10日),55,'样本度量#1','样本类别#2'],
[新日期(2013年11月9日),55,'样本度量#1','样本类别#2'],
[新日期(2013年11月8日),55,'样本度量#1','样本类别#2'],
[新日期(2013年11月12日),5120,'样本度量#1','样本类别#3'],
[新日期(2013年11月11日),5120,'样本度量#1','样本类别#3'],
[新日期(2013年11月10日),5120,'样本度量#1','样本类别#3'],
[新日期(2013年11月9日),4961,“样本指标1”,“样本类别3”,
[新日期(2013年11月08日),4961,“样本指标1”,“样本类别3”,
[新日期(2013年11月12日),26389,'样本度量#2','样本类别#1'],
[新日期(2013年11月11日),26389,“样本指标2”,“样本类别1”,
[新日期(2013年11月10日),26389,“样本指标2”,“样本类别1”,
[新日期(2013年11月9日),26417,“样本指标2”,“样本类别1”,
[新日期(2013年11月08日),26417,“样本指标2”,“样本类别1”,
[新日期(2013年11月12日),55,'样本度量#2','样本类别#2'],
[新日期(2013年11月11日),55,'样本度量#2','样本类别#2'],
[新日期(2013年11月10日),55,'样本度量#2','样本类别#2'],
[新日期(2013年11月9日),55,'样本度量#2','样本类别#2'],
[新日期(2013年11月8日),55,'样本度量#2','样本类别#2'],
[新日期(2013年11月12日),5793,'样本度量#2','样本类别#3'],
[新日期(2013年11月11日),5793,'样本度量#2','样本类别#3'],
[新日期(2013年11月10日),5793,'样本度量#2','样本类别#3'],
[新日期(2013年11月9日),5565,“样本指标2”,“样本类别3”,
[新日期(2013年11月12日),119398,'样本度量#3','样本类别#1'],
[新日期(2013年11月11日),119398,'样本度量#3','样本类别#1'],
[新日期(2013年11月10日),119398,'样本度量#3','样本类别#1'],
[新日期(2013年11月9日),119505,“样本指标#3”,“样本类别#1”],
[新日期(2013年11月08日),119505,“样本指标3”,“样本类别1”,
[新日期(2013年11月12日),56,'样本度量#3','样本类别#2'],
[新日期(2013年11月11日),56,'样本度量#3','样本类别#2'],
[新日期(2013年11月10日),56,'样本度量#3','样本类别#2'],
[新日期(2013年11月9日),56,“样本指标#3”,“样本类别#2'],
[新日期(2013年11月08日),56,“样本指标3”,“样本类别2'],
[新日期(2013年11月12日),7360,'样本度量#3','样本类别#3'],
[新日期(2013年11月11日),7360,'样本度量#3','样本类别#3'],
[新日期(2013年11月10日),7360,'样本度量#3','样本类别#3'],
[新日期(2013年11月9日),7108,“样本指标#3”,“样本类别#3'],
[新日期(2013年11月08日),7108,“样本指标3”,“样本类别3'];
var data=new google.visualization.DataTable();
data.addColumn('date','date');
data.addColumn('number','Count');
data.addColumn('string','Metric');
data.addColumn('string','Category');
数据。添加行(obj);
var lineChart=new google.visualization.ChartWrapper({
图表类型:“线条图”,
ContainerId:“contlinetime”,
“视图”:{“列”:[0,1]},
选项:{
'chartArea':{'height':'80%,'width':'80%},
'hAxis':{'slidedtext':false},
“curveType”:“line”,
“点大小”:3,
'图例':{'position':'none'}});
新的google.visualization.Dashboard(document.getElementById('conttime'))。
绑定([contMetFilter,contCatFilter],折线图)。
绘制(数据);
}
google.setOnLoa