Gráfico de dispersión con línea de regresión

A continuación se muestra un ejemplo de un gráfico de dispersión con línea de regresión.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de gráfico de dispersión con línea de regresión.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de gráfico para que se base en la dispersión. series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

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

Ejemplo

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

Resultado

Verifica el resultado.