Grafico a dispersione con linea di regressione

Di seguito è riportato un esempio di un grafico a dispersione con linea di regressione.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di grafico a dispersione con linea di regressione.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

serie

Configurare il tipo di grafico in modo che sia basato sulla dispersione. series.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

chart.addSeries(chart.createSeries()  
   .setType(Type.SCATTER)  
);

Esempio

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.plotOptions.LinePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;

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 with regression line");  

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

      chart.getYAxis()  
         .setMin(0);  

      chart.addSeries(chart.createSeries()  
         .setName("Regression Line")  
         .setType(Series.Type.LINE)  
         .setPlotOptions(new LinePlotOptions()  
            .setMarker(new Marker()  
               .setEnabled(false)  
            )  
            .setHoverStateLineWidth(0)  
            .setEnableMouseTracking(false)  
         )  
         .setPoints(new Number[][]{  
            {0, 1.11}, {5, 4.51}  
         })  
      );  

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

Risultato

Verifica il risultato.