使用 Google Visualization API 在 Vaadin 7 中显示图表答案

【问题标题】：Displaying a chart in Vaadin 7 with Google Visualization API使用 Google Visualization API 在 Vaadin 7 中显示图表
【发布时间】：2014-08-13 13:45:53
【问题描述】：

我想使用 Google Visualization API 显示条形图。我按照这个线程中的示例代码：https://vaadin.com/forum/#!/thread/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,table+de.css

<link href="https://www.google.com/uds/api/visualization/1.0/dee027d0b48a2e0a0a0375d00d7dd635/ui+de,table+de.css" type="text/css" rel="stylesheet">

格式+de,default+de,ui+de,table+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异常。

我正在使用 Vaadin 7.2.5

提前致谢！

【问题讨论】：

您是否检查了所有必需的 java 脚本文件是否都在 html 标头中？
你把文件“gvis.js”、“gvis-connector.js”放在哪里了？
@d2k2 文件位于com.andrebruch.chartframework.chartapis.googlecharts 包下的源文件夹中，如 GVis.java。
@d2k2 所有必需的 javascript 文件都位于 -tag 的末尾。如果我将它们插入头部，则没有任何改善。

标签： java javascript google-visualization vaadin vaadin7

【解决方案1】：

只有我的建议：尝试使用这个插件：

https://vaadin.com/directory#!addon/visualizationsforvaadin

Javascript 很酷！但是当您在 Vaadin 的 UI 中工作时使用 Java 代码！很棒的框架！

祝你好运！

【讨论】：