谷歌圖表「不符合控制或可視化規範」

當試圖將一個儀表板控件添加到正在運行的谷歌圖表項目時，我得到「..不符合控制或可視化規範」 - 與行「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

谷歌圖表「不符合控制或可視化規範」

回答

相關問題