Google visualization 谷歌图表“；不符合控制或可视化规范；
当尝试将仪表板控件添加到工作的GoogleCharts项目时，我得到 “.不符合控制或可视化规范”-与末尾的行“Google visualization 谷歌图表“；不符合控制或可视化规范；,google-visualization,Google Visualization,当尝试将仪表板控件添加到工作的GoogleCharts项目时，我得到 “.不符合控制或可视化规范”-与末尾的行“var dashboard=new…”相关 下面的代码将独立工作并复制整个错误： <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">
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>
load（'visualization'，'1.0'，{'packages'：['annotatedtimeline'，'controls']}）；
setOnLoadCallback（drawChart）；
函数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'）；
数据。添加行（3）；
data.setValue（0,0，新日期（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，新日期（2011,10,26,12,7,50,0））；data.setValue（1,1）；data.setValue（1,2,4）；data.setValue（1,7,4）；data.setValue（1,5,5）；data.setValue（1,3,7）；data.setValue（1,6,8）；data.setValue（2,0，新日期（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）；
变量选项={
宽度：1100，
身高：450，
标题：“关键词绩效-股权发行”，
hAxis:{title:'Date/Time'，showTextEvery:24}，
“真的”，
日期格式：“HH:mm-mm-dd，yyyy”
};
var categoryPicker=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“control1”，
“选项”：{
'filterColumnLabel'：'Metric'，
“用户界面”：{
“allowTyping”：false，
“allowMultiple”：正确，
'selectedValuesLayout'：'belowStacked'
}
},
//定义初始状态，即初始选择的一组度量。
'state'：{'selectedValues'：[1,2,3,4,5,6,7]}
});
var chart=new google.visualization.AnnotatedTimeLine（document.getElementById（'chart_div0'））；
图表绘制（数据、选项）；
var dashboard=new google.visualization.dashboard（document.getElementById（'dashboard_div'））.bind（categoryPicker，drawChart）.draw（数据，选项）；
}
要使用仪表板
元素，您需要将ChartWrapper
和ControlWrapper
元素都输入仪表板。现在您只使用ControlWrapper
并尝试将其链接到仪表板本身不涉及的图表（因为它不是chartwapper
对象）。我尝试创建一个带注释的时间线图作为仪表板的一部分，但没有成功：
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);
}