谷歌图表“不符合控制或可视化规范”

当试图将一个仪表板控件添加到正在运行的谷歌图表项目时，我得到 “..不符合控制或可视化规范” - 与行“var dashboard = new ...”即将结束。谷歌图表“不符合控制或可视化规范”

下面的代码将独立工作，并再现整个错误：

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

来源

2011-11-30 user1073263

要使用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); 
}

来源

2013-02-18 04:30:09 jmac

谷歌图表“不符合控制或可视化规范”

回答

相关问题