如何设置 Google 可视化动态图表的状态？

Question

我正在使用 GWT 和 Google 图表工具（又名可视化）1.1 库< GWT 的 Google API 库的 /a>。

我想显示动态图表并在 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

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

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

我希望它有帮助......