GXT 3.0 图表概览

参考

• 绘图和图表 - 更多关于绘图和图表的信息。
• 图表入门 - 图表入门。
• 图表坐标轴 - 更多关于图表坐标轴配置的信息。
• 图表序列 - 更多关于图表序列配置的信息。
• ListStore - 更多关于列表 Store 配置的信息。

演示

• 图表示例

表现力强的数据呈现

在绘图和图表指南中，我们介绍了 Sencha GXT 图表库。然而，图表库的功能远不止之前介绍的那些。本文讨论您可以使用的更高级和高级功能，包括调整支持图表的数据 Store。通过对基本图表设置进行一些简单的更改，您可以使可视化效果更具解释性和表现力。

Store 过滤器

过滤是 Store API 中更强大的工具之一。可以过滤 Store 数据，而无需删除它。这是一个包含大量点的散点图示例。

让用户专注于特定范围的点将非常有用。这可以使用过滤器轻松完成。首先，请确保在您的 Store 上启用过滤器。

store.setEnableFilters(true);

然后，例如，您可能只想在第一个字段中显示 0 到 50 范围内的数据。

store.addFilter(new StoreFilter<Data>() {
  @Override
  public boolean select(Store<Data> store, Data parent, Data item) {
    double data1 = dataAccess.data1().getValue(item);
    if (data1 < 0 || data1 > 50) {
      return false;
    } else {
      return true;
    }
  }
});

过滤器图表示例根据微调器字段中的值进行类似的过滤。请注意，当所有 Store 项目都被过滤掉时，序列将被删除。

数据中的间隙

有时，问题不是您的 Store 中数据过多，而是数据不足，例如，当您表示的数据在其记录中存在间隙时。在这种情况下，数据缺少值，因此最好根本不渲染该点。将无值表示为零可能会产生误导。LineSeries 和 ScatterSeries 提供了执行此操作的能力。

在线条间隙图表示例中，通过每四个项目存储 Double.NaN 来模拟具有间隙的数据。空值也适用于数据中的间隙。

for (int i = 0; i < 12; i++) {
  if (i % 4 != 0) {
    store.add(new GapData(monthsFull[i % 12], Math.random() * 100, Math.random() * 100));
  } else {
    store.add(new GapData(monthsFull[i % 12], Double.NaN, Double.NaN));
  }
}

第一个序列“无间隙 (Gapless)”表示默认响应，其中线条仍然在点上绘制，但未绘制标记。第二个序列“有间隙 (Gapped)”将 gapless 标志设置为 false。

series2.setGapless(false);

This changes the line series to use a moveto command for the next point creating a 
more visible gap in the chart.

与 GXT3 集成

图表 Store 关系的另一个强大功能是与其他 GXT 数据小部件的集成。这里我们有一个更复杂的示例，即仪表板示例，它使用两个图表与网格协同工作。

首先，让我们看一下条形图。它表示每个公司的总体价值和价格。因为它使用与网格相同的 Store，所以这允许轻松的跨小部件选择。以下处理程序在选择条形图时选择适当的网格项目。

bar.addSeriesSelectionHandler(new SeriesSelectionHandler<Data>() {
  @Override
  public void onSeriesSelection(SeriesSelectionEvent<Data> event) {
    grid.getSelectionModel().select(event.getIndex(), false);
  }
});

在网格的右侧，有一组小部件用于显示当前所选公司的更精细的详细信息。雷达图非常适合显示每个公司的五个属性之间的关系。您可以通过使用单独的 Store 设置雷达图来实现此目的，该 Store 会随着当前关注的数据更新。

private void updateRadarStore(int index) {
  radarStore.clear();
  Data data = store.get(index);
  name.setValue(data.getName());
  radarStore.add(new RadarData(radarLabels[0], data.getData1()));
  price.setValue(data.getData1());
...

另请注意变量“price”。这是微调器字段之一，用于操作当前所选公司的属性。每个微调器字段都使用其值更改事件来更新 Store 和相关图表。

price.addValueChangeHandler(new ValueChangeHandler<Double>() {
  @Override
  public void onValueChange(ValueChangeEvent<Double> event) {
    if (currentData != null) {
      Double value = event.getValue();
      if (value != null) {
        int storeIndex = store.indexOf(currentData);
        currentData.setData1(value);
        store.update(currentData);
        bar.drawSeries();
        bar.highlight(storeIndex);
        updateRadarStore(storeIndex);
        radarChart.redrawChart();
      }
    }
  }
});

使用当前选定的 Store 项目，它会替换存储的值并更新该项目的 Store。然后，它会为新数据重新绘制雷达图和条形图。

现在，查看示例的核心，即网格，我们看到两个图表都响应网格中的更改。因为它们使用相同的 Store，所以网格上更改 Store 的任何内容也会影响条形图，因此对网格进行排序或过滤也会导致条形图做出相应的响应。

此外，当选择网格行时，它会保存相应的 Store 项目，突出显示相应的条形图并更新公司详细信息窗格。

grid.getSelectionModel().addSelectionChangedHandler(new SelectionChangedHandler<Data>() {
  @Override
  public void onSelectionChanged(SelectionChangedEvent<Data> event) {
    if (event.getSelection().size() > 0) {
      int index = store.indexOf(event.getSelection().get(0));
      if (currentData != null) {
        bar.unHighlight(store.indexOf(currentData));
        currentData = null;
      }
      if (index >= 0) {
        bar.highlight(index);
        currentData = event.getSelection().get(0);
        // update radar chart
        updateRadarStore(index);
        radarChart.redrawChart();
      }
    }
  }
});

连接这些小部件可以创建更具交互性和响应性的应用程序。

ValueProvider

最后，让我们看一个示例，了解如何动态创建超出初始 ValueProvider 字段数量的线条序列。本文中的所有示例都使用属性访问方法来生成 ValueProvider。但是，这不是向图表提供数据字段的唯一方法。ValueProvider 只是一个接口，允许您从其他数据中获取数据。

在动态折线图示例中，我们完全避免了属性访问，而只是为我们的 Store 项目使用了 Map。

public class ModelItem extends HashMap<String, Double> {
  private String key;

  public ModelItem(String key) {
    this.key = key;
  }

  public String getKey() {
    return key;
  }
}

public class MapValueProvider implements ValueProvider<ModelItem, Double> {
  private String field;

  public MapValueProvider(String field) {
    this.field = field;
  }

  @Override
  public String getPath() {
    return field;
  }

  @Override
  public Double getValue(ModelItem object) {
    return object.get(field);
  }

  @Override
  public void setValue(ModelItem object, Double value) {
    object.put(field, value);
  }
}

...

ListStore<ModelItem> store = new ListStore<ModelItem>(new ModelKeyProvider<ModelItem>() {
  @Override
  public String getKey(ModelItem item) {
  return String.valueOf(item.getKey());
  }
});

这使得 ValueProvider 的可读性较差，但动态性更强，可以在运行时创建；但首先，需要使用将在其中存储字段数据的 Map 初始化 Store。

for (int i = 0; i < 12; i++) {
  ModelItem item = new ModelItem("item" + i);
  item.put("first", Math.random() * 100);
  store.add(item);
}

然后，让我们编写一个方法来创建给定任意字段的线条序列。请注意，新的 ValueProvider 也已添加到轴。

private LineSeries<ModelItem> createLine(String field) {
MapValueProvider valueProvider = new MapValueProvider(field);

LineSeries<ModelItem> series = new LineSeries<ModelItem>();
series.setYAxisPosition(Position.LEFT);
Color color = new RGB((int) (Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255));
series.setStroke(color);
series.setYField(valueProvider);

接下来，要使用为“first”字段设置的数据制作第一条线，我们只需要调用。

LineSeries<ModelItem> series = createLine("first");
chart.addSeries(series);

现在，当用户想要在示例中添加新行时，我们只需将新数据添加到 Store 中的 Map，并使用访问该数据的 ValueProvider 创建新行。

TextButton add = new TextButton("Add");
add.addSelectHandler(new SelectHandler() {
  @Override
  public void onSelect(SelectEvent event) {
    String field = fieldInput.getValue();
    if (field.length() > 0 && fieldStore.findModelWithKey(field) == null && fieldStore.size() < 10) {
      for (int i = 0; i < store.size(); i++) {
        ModelItem item = store.get(i);
        item.put(field, Math.random() * 100);
      }
      LineSeries<ModelItem> series = createLine(field);
      fieldStore.add(series);
      axis.addField(series.getYField());
      chart.addSeries(series);
      chart.redrawChart();
    }
  }
});

总结

在本文中，您了解了一些利用 Sencha GXT 3 图表的功能来快速轻松地为您的 Web 应用程序开发丰富、信息丰富的可视化效果的方法。我们为我们作为 GXT 一部分提供的工具集感到自豪，并且我们迫不及待地想看到您使用它们构建的应用程序。