使用Google可视化API在Vaadin 7中显示图表
Displaying a chart in Vaadin 7 with Google Visualization API
我想用Google Visualization API显示一个条形图。我遵循这个线程中的示例代码:https://vaadin.com/forum/#!/线程/2971952/
下面是我的代码:GVis.java
@JavaScript({
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js",
"gvis.js",
"gvis-connector.js" })
public class GVis extends AbstractJavaScriptComponent {}
gvis.js
var gvis = gvis || {};
gvis.GVis = function(element) {
this.element = element;
this.element.innerHTML = "<div id='chart_div' style='height:500px; width:500px;'></div>";
var oldDocumentWrite = document.write;
// change document.write temporary
document.write = function(node) {
$("body").append(node);
};
$(function() {
window.initialize = function() {
google.setOnLoadCallback(drawVisualization);
setTimeout(function() {
document.write = oldDocumentWrite;
}, 100);
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece' ],
[ '2003', 1336060, 400361, 1001582, 997974 ],
[ '2004', 1538156, 366849, 1119450, 941795 ],
[ '2005', 1576579, 440514, 993360, 930593 ],
[ '2006', 1600652, 434552, 1004163, 897127 ],
[ '2007', 1968113, 393032, 979198, 1080887 ],
[ '2008', 1901067, 517206, 916965, 1056036 ] ]);
// Create and draw the visualization.
new google.visualization.BarChart(document
.getElementById("chart_div")).draw(data, {
title : "Yearly Coffee Consumption by Country",
width : 100,
height : 100,
vAxis : {
title : "Year"
},
hAxis : {
title : "Cups"
}
});
}
};
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22corechart%22%2C%22table%22%5D%7D%5D%7D&'
+ 'callback=initialize';
document.body.appendChild(script);
});
};
gvis-connector.js
window.com_andrebruch_chartframework_chartapis_googlecharts_GVis = function() {
var gVis = new gvis.GVis(this.getElement());
this.onStateChange = function() {};
};
代码加载这两个文件:
ui +德表+ de.css
<link href="https://www.google.com/uds/api/visualization/1.0/dee027d0b48a2e0a0a0375d00d7dd635/ui+de,table+de.css" type="text/css" rel="stylesheet">
格式+德,默认+德,ui +德表+ de corechart + de.I.js
<script src="https://www.google.com/uds/api/visualization/1.0/dee027d0b48a2e0a0a0375d00d7dd635/format+de,default+de,ui+de,table+de,corechart+de.I.js" type="text/javascript"></script>
但是图表没有出现,也没有JS异常。
我正在使用vadin 7.2.5
提前感谢!
我的建议是:试着使用这个插件:
https://vaadin.com/directory !插件/visualizationsforvaadin
Javascript,它很酷!但是当您在Vaadin的ui中工作时,请使用Java代码!伟大的框架!
祝你好运!
相关文章:
- vaadin:使用自定义布局集成angular js
- 将Vaadin组件放入Javascript组件生成的元素中
- 使用jquery调用vaadin应用程序表单php
- 将Google Adwords脚本添加到Vaadin应用程序中
- Vaadin组合框无法读取属性'addEventListener'为null
- 在vaadin中隐藏/展开布局
- 试图获得“;橡皮擦”;使用HTML5 Canvas和Vaadin,但它只是清除了
- 鼠标悬停后显示图层
- Vaadin:调用一个自定义的JavaScript函数
- Vaadin组合框:在输入时加载项目
- Partial state changes for Vaadin's AbstractJavascriptCom
- 使用 :after 选择器与 slideToggle() 一起显示图标的问题
- 如何将 d3 (javascript) 添加到 vaadin 应用程序
- 在 Vaadin 7 中创建的 onbeforeunload 函数返回空字符串在 IE 10 中仍然显示提示
- Vaadin @Javascript :清除更新的JS文件的缓存
- Vaadin dynamic loading JavaScript, CustomLayout
- Vaadin 的特殊路径变量列表 @JavaScript(value = { “vaadin://..", &
- Vaadin Widgetset 不会在所有网络上显示
- Vaadin (self contained) portlet (Liferay) with Javascript (d
- Vaadin 和独立的 JavaScript Events