Google 차트가 "제어 또는 시각화 사양에 맞지 않습니다."

Google 차트 항목에 Dashboard 컨트롤을 추가하려고하면 이 "제어 또는 시각화 사양에 맞지 않습니다."- 끝에 "var dashboard = new ..."줄이 있습니다.Google 차트가 "제어 또는 시각화 사양에 맞지 않습니다."

아래 코드는 독립 작동하고 전체 오류가 재현됩니다

<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

당신이 그것을에 모두 ChartWrapper 및 ControlWrapper 요소를 공급하기 위해 필요 Dashboard 요소를 사용하기를. 지금은 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); 
}

그것은 (컨트롤이 잘 작동하지만) 차트를 그릴 실패합니다. Annotated Time Line 차트는 플래시 차트이므로 대시 보드에서 제대로 작동하지 않을 수 있습니다. 아니면 ChartWrapper 객체 유형이 Annotated Time Lines를 허용하지 않을 수도 있습니다. 꺾은 선형 차트로 동일한 작업을 수행하면 작동합니다.

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

Google 차트가 "제어 또는 시각화 사양에 맞지 않습니다."

답변

관련 문제