使Google可视化 - 注释图表在GWT中工作 [英] Making Google Visualization - Annotation Chart to work in GWT
问题描述
我正在使用gwt中新发布的注释图原生JavaScript，我到现在为止是让它显示示例图表，但我遇到的问题是它根本不是交互式的。它看起来更像一个图像。任何人都知道我该如何使这项工作正常？
I am using the newly released Annotation Chart in gwt by calling native javascript, and what I got until now is to have it display the example chart as it is, but the problem I am having is that it is not interactive at all. It looks more like an image. Anyone got any idea about how might I make this work properly?
下面是我使用的代码：
Here's the code I am using:
public void onModuleLoad() {
createChart();
}
private native void createChart()
/*-{
$wnd.google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new $wnd.google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new $wnd.google.visualization.AnnotationChart($wnd.document.getElementById('chart_div'));
var options = {
displayAnnotations: true,
};
chart.draw(data, options);
}
}-*/;
我在HTML文件中加载库：
and I am loading the library in the HTML file:
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="GUI.css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Analytics</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="gui/gui.nocache.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {'packages' : ["annotationchart"] });
</script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
推荐答案
要回答我自己的问题，这里是我为这张图表编写的GWT包装器。它可以工作并支持所有选项，并且可以像在GWT中使用其他Google图表一样使用。
To answer my own question, here is the GWT wrapper that I wrote for this chart. It works and supports all the options, and can be used in the same way as you would use other google charts in GWT.
这篇关于使Google可视化 - 注释图表在GWT中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
