Question

我正在使用GWT和Google Chart Tools (aka Visualization) 1.1 Library的Google API Libraries for GWT。

我想在Javascript中显示动态图表并设置状态。

有人知道如何设置状态吗？

Answer 1

这是来自GWT-Getting Started页面的略微修改的MotionChart，其中包含来自Javascript文档的数据。我没有测试它，所以我不确定代码是否有效。

public class SimpleViz implements EntryPoint {
              public void onModuleLoad() {
                // Create a callback to be called when the visualization API
                // has been loaded.
                Runnable onLoadCallback = new Runnable() {
                  public void run() {
                    Panel panel = RootPanel.get();

                    MotionChart chart = new MotionChart(createTable(), createOptions());

                    panel.add(chart);
                  }
                };
                VisualizationUtils.loadVisualizationApi(onLoadCallback, MotionChart.PACKAGE);
              }

              private Options createOptions() {
                Options options = Options.create();
                options.setWidth(600);
                options.setHeight(300);
                options.setTitle("My Motion Chart");

                //  Passing JSON state with escaped double quotes to options class. 
                options.setState("{\"orderedByY\":false,\"showTrails\":true,\"dimensions\":{\"iconDimensions\":[\"dim0\"]},\"yAxisOption\":\"3\",\"xZoomedIn\":false,\"time\":\"1988-04-16\",\"yZoomedIn\":false,\"xAxisOption\":\"2\",\"yZoomedDataMin\":150,\"yZoomedDataMax\":617,\"xZoomedDataMin\":300,\"uniColorForNonSelected\":false,\"xLambda\":1,\"playDuration\":15000,\"yLambda\":1,\"duration\":{\"timeUnit\":\"D\",\"multiplier\":1},\"iconType\":\"BUBBLE\",\"iconKeySettings\":[{\"trailStart\":\"1988\",\"key\":{\"dim0\":\"Apples\"}},{\"trailStart\":\"1988\",\"key\":{\"dim0\":\"Oranges\"}},{\"trailStart\":\"1988\",\"key\":{\"dim0\":\"Bananas\"}}],\"colorOption\":\"2\",\"xZoomedDataMax\":1200,\"nonSelectedAlpha\":0.4,\"orderedByX\":false,\"sizeOption\":\"_UNISIZE\"}");
                return options;
              }

              private AbstractDataTable createTable() {
                DataTable data = DataTable.create();
                    data.addColumn('string', 'Fruit');
                    data.addColumn('date', 'Date');
                    data.addColumn('number', 'Sales');
                    data.addColumn('number', 'Expenses');
                    data.addColumn('string', 'Location');
                data.addColumn(ColumnType.STRING, "Fruit");
                data.addColumn(ColumnType.DATE, "Date");
                data.addColumn(ColumnType.NUMBER, "Sales");
                data.addColumn(ColumnType.NUMBER, "Expenses");
                data.addColumn(ColumnType.STRING, "Location");
                data.addRows(6);
                 data.setValue(0, 0, "Apples");
                data.setValue(0, 1, new Date (1988,0,1));
                data.setValue(0, 2, 1000);
                data.setValue(0, 3, 300);
                data.setValue(0, 4, "East");
                 data.setValue(1, 0, "Oranges");
                data.setValue(1, 1, new Date (1988,0,1));
                data.setValue(1, 2, 1150);
                data.setValue(1, 3, 200);
                data.setValue(1, 4, "West");
                 data.setValue(2, 0, "Bananas");
                data.setValue(2, 1, new Date (1988,0,1));
                data.setValue(2, 2, 300);
                data.setValue(2, 3, 250);
                data.setValue(2, 4, "West");
                 data.setValue(3, 0, "Apples");
                data.setValue(3, 1, new Date (1989,6,1));
                data.setValue(3, 2, 1200);
                data.setValue(3, 3, 400);
                data.setValue(3, 4, "East");
                 data.setValue(4, 0, "Oranges");
                data.setValue(4, 1, new Date (1989,6,1));
                data.setValue(4, 2, 750);
                data.setValue(4, 3, 150);
                data.setValue(4, 4, "West");
                 data.setValue(5, 0, "Bananas");
                data.setValue(5, 1, new Date (1989,6,1));
                data.setValue(5, 2, 788);
                data.setValue(5, 3, 617);
                data.setValue(5, 4, "West");
                return data;
     }
}

Answer 2

我不完全确定我理解这个问题。在您引用的文档中，有用于设置状态的部分。

基本上，您必须打开已填充的MotionChart可视化，默认操作要显示的实体/选项，然后从图表的GWT控件中获取状态字段。

http://code.google.com/intl/fr/apis/visualization/documentation/gallery/motionchart.html#Motion_Chart_initial_state

从那里，您可以通过常规例程设置选项。

Answer 3

首先创建图表＆amp;创建提供它们的数据表 - 使用您的特定应用程序所需的任何选项。
然后你创建行＆amp;列使用谷歌的.addRow（）和.addColumn（）方法。
使用.draw（）方法填充表格并渲染初始图像
最后你需要一种可以更新图像的方法。我创建了两个自定义函数：一个用于通过ajax调用获取数据，另一个用于操作现有表中的数据并定期请求额外的.draw（）。

您可以在此处查看工作演示和快速教程 - http://www.logicwizards.net/monitor-lamp-servers-wbash-php5/

我希望它有所帮助...

如何设置Google Visualization动态图表的状态？

3 个答案: