GWT Highcharts - Streudiagramm

Das folgende Beispiel zeigt ein grundlegendes Streudiagramm.

Die Konfiguration zum Zeichnen eines Diagramms haben wir bereits im Kapitel Highcharts-Konfigurationssyntax gesehen .

Ein Beispiel für ein grundlegendes Streudiagramm ist unten angegeben.

Konfigurationen

Lassen Sie uns nun die zusätzlichen Konfigurationen / Schritte sehen, die unternommen wurden.

Serie

Konfigurieren Sie den Diagrammtyp so, dass er streuungsbasiert ist. series.typeentscheidet über den Serientyp für das Diagramm. Hier ist der Standardwert "line".

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

Beispiel

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);
   }
}

Ergebnis

Überprüfen Sie das Ergebnis.