GXT 图表入门

参考

• 图表轴 - 有关图表轴配置的更多信息。
• 图表系列 - 有关图表系列配置的更多信息。
• ListStore - 有关列表存储配置的更多信息。

演示

• 在线演示

图表库

使用标准 jar 或 Maven 依赖项将 GXT 图表依赖项添加到项目构建路径。

• 使用 Maven 添加依赖项

    <!-- GXT charts library -->
    <dependency>
        <groupId>com.sencha.gxt</groupId>
        <artifactId>gxt-chart</artifactId>
        <version>${gxt.version}</version>
    </dependency>
  

• 从 Sencha GXT 下载 jar 并将其添加到项目构建路径。如果您有支持，请登录 Sencha 支持，然后找到库并下载它。

项目模块设置

使用图表需要在 GWT 项目 xml 模块中添加一个库。

• 将 com.sencha.gxt.chart.Chart 添加到 GWT 项目模块

    <inherits name='com.sencha.gxt.chart.Chart' />
  

• Project.gwt.xml 模块示例：（_这是一个完整的示例，其中大部分是可选的。_）

    <!-- Project.gwt.xml module file -->
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE module PUBLIC "-//Google Inc.//DTD GWT 2.7.0//EN"
        "http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">
    <module rename-to='project'>
        <!-- Inherit the core Web Toolkit stuff. -->
        <inherits name='com.google.gwt.user.User' />
  
        <!-- Other module inherits -->
        <inherits name='com.sencha.gxt.ui.GXT' />
  
        <!-- Add this for using GXT charts -->
        <inherits name='com.sencha.gxt.chart.Chart' />
  
        <!-- GXT Stylesheet -->
        <stylesheet src="reset.css" />
  
        <!-- Override the blue theme -->
        <inherits name="com.sencha.gxt.theme.gray.Gray" />
  
        <!-- Specify the app entry point class. -->
        <entry-point class='com.sencha.gxt.project.client.ProjectEntryPoint' />
  
        <!-- Specify the paths for translatable code -->
        <source path='client' />
        <source path='shared' />
    </module>
  

基本图表示例

这只是众多 GXT 图表配置之一，显示了饼图的示例。在此处查找更多 在线示例。

• 带有数据模型和列表存储的 BasicChart 示例。

    public class BasicChart implements IsWidget {
      // Chart data model
      public class DataModel {
        private int id;
        private String name;
        private double data;
        public int getId() {
          return id;
        }
        public void setId(int id) {
          this.id = id;
        }
        public String getName() {
          return name;
        }
        public void setName(String name) {
          this.name = name;
        }
        public double getData() {
          return data;
        }
        public void setData(double data) {
          this.data = data;
        }
      }
  
      // Chart data model property access definitions
      public interface DataModelProperties extends PropertyAccess<DataModel> {
        ModelKeyProvider<DataModel> id();
        ValueProvider<DataModel, String> name();
        ValueProvider<DataModel, Double> data();
      }
  
      public static final DataModelProperties dataModelProperties = GWT.create(DataModelProperties.class);
      private ListStore<DataModel> listStore;
      private Chart<DataModel> chart;
  
      @Override
      public Widget asWidget() {
        // Setup the chart list store
        listStore = new ListStore<DataModel>(dataModelProperties.id());
  
        // Setup the chart
        chart = new Chart<DataModel>();
        chart.setStore(listStore);
  
        // Set the chart legend
        Legend<DataModel> legend = new Legend<DataModel>();
        legend.setPosition(Position.RIGHT);
        legend.setItemHighlighting(true);
        legend.setItemHiding(true);
        chart.setLegend(legend);
  
        // Setup series slice colors
        Gradient slice1 = new Gradient("slice1", 45);
        slice1.addStop(new Stop(0, new RGB(148, 174, 10)));
        slice1.addStop(new Stop(100, new RGB(107, 126, 7)));
        chart.addGradient(slice1);
        Gradient slice2 = new Gradient("slice2", 45);
        slice2.addStop(new Stop(0, new RGB(17, 95, 166)));
        slice2.addStop(new Stop(100, new RGB(12, 69, 120)));
        chart.addGradient(slice2);
  
        // Setup the chart series
        PieSeries<DataModel> series = new PieSeries<DataModel>();
        series.setAngleField(dataModelProperties.data());
        series.setDonut(50);
        series.addColor(slice1);
        series.addColor(slice2);
  
        // Setup the label config
        SeriesLabelConfig<DataModel> labelConfig = new SeriesLabelConfig<DataModel>();
        labelConfig.setLabelPosition(LabelPosition.START);
        labelConfig.setValueProvider(dataModelProperties.name(), new StringLabelProvider<String>());
        series.setLabelConfig(labelConfig);
  
        // Setup the legend label config
        series.setLegendValueProvider(dataModelProperties.name(), new LabelProvider<String>() {
          public String getLabel(String item) {
            return item.substring(0, 3);
          }
        });
        chart.addSeries(series);
  
        addSomeData();
  
        return chart;
      }
  
      private void addSomeData() {
        DataModel item1 = new DataModel();
        item1.setId(1);
        item1.setName("male");
        item1.setData(50);
  
        DataModel item2 = new DataModel();
        item2.setId(2);
        item2.setName("female");
        item2.setData(50);
  
        listStore.add(item1);
        listStore.add(item2);
      }
    }