Gwt Highcharts 简明教程

GWT Highcharts - Scatter Chart

以下是散点图的基本示例。

我们已经看到了在 Highcharts Configuration Syntax 章节中用于绘制图表的配置。

下面给出散点图的基本示例。

Configurations

现在让我们看看所采取的附加配置/步骤。

series

将图表类型配置为基于散点。 series.type 决定图表系列类型。此处,默认值为“折线”。

chart.addSeries(chart.createSeries()
   .setName("Observations")
   .setType(Type.SCATTER)
   .setPoints(new Number[] {
      1, 1.5, 2.8, 3.5, 3.9, 4.2
   })
);

Example

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series.Type;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()
         .setChartTitleText("Scatter plot");

      chart.getXAxis()
         .setMin(-0.5)
         .setMax(5.5);

      chart.getYAxis()
         .setMin(0);

      chart.addSeries(chart.createSeries()
         .setName("Observations")
         .setType(Type.SCATTER)
         .setPoints(new Number[] {
            1, 1.5, 2.8, 3.5, 3.9, 4.2
         })
      );
      RootPanel.get().add(chart);
   }
}

Result

验证结果。

gwt highcharts scatter basic