GWT Highcharts-散点图

GWT Highcharts 是为谷歌 Web 工具包（GWT）打造的一款高亮显示 JavaScript 图表库，可以让程序员轻松地通过 Java 代码使用 Highcharts 库。其中包括了散点图。

散点图

散点图是用于观察两个变量之间关系的一种图表。其中一维通常用横坐标表示，另一维用纵坐标表示。数据点位置以及大小都可以用来传达数据的含义。通常情况下，散点图常用于显示数据的分布情况或与趋势线的相关性。

以下代码片段展示了如何使用 GWT Highcharts 绘制散点图。

import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ChartReadyHandler;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.PointShape;
import com.googlecode.gwt.charts.client.corechart.ScatterChart;
import com.googlecode.gwt.charts.client.corechart.ScatterChartOptions;

public class ScatterChartExample implements EntryPoint {
  @Override
  public void onModuleLoad() {
    ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
    chartLoader.loadApi(new Runnable() {
      @Override
      public void run() {
        ScatterChart scatterChart = new ScatterChart();
        RootPanel.get().add(scatterChart);
        drawScatterChart(scatterChart);
      }
    });
  }

  private void drawScatterChart(final ScatterChart scatterChart) {
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.NUMBER, "X-Value");
    data.addColumn(ColumnType.NUMBER, "Y-Value");
    data.addRow(1, 1);
    data.addRow(2, 2);
    data.addRow(3, 3);
    data.addRow(4, 4);
    data.addRow(5, 5);

    ScatterChartOptions options = ScatterChartOptions.create();
    options.setTitle("Scatter Chart");
    options.setPointSize(10);
    options.setPointShape(PointShape.CIRCLE);
    options.setLegend("none");
    options.setWidth(400);
    options.setHeight(400);

    scatterChart.draw(data, options);
  }
}

上述代码创建了一个散点图，其中定义了数据以及图表的选项。其中，散点图的点形状被设置为圆形，大小为 10，标题为 "Scatter Chart"。图例未显示，宽度和高度均为 400 像素。

结论

散点图是用于显示数据分布情况和趋势线相关性的一种图表。使用 GWT Highcharts 可以轻松绘制散点图，只需几行 Java 代码。散点图的点形状、大小和图例等属性可以根据具体需求进行自定义。