GWT Highcharts - Gráfico de mapa de calor

A continuación se muestra un ejemplo de un gráfico de mapa de calor.

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 un gráfico de mapa de calor.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

gráfico

Configure el tipo de gráfico para que esté basado en 'mapa de calor'. chart.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

chart.setType(Type.HEATMAP);

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.ColorAxis;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.Style;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.HeatmapPlotOptions;

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()  
         .setType(Series.Type.HEATMAP)  
         .setMarginTop(40)  
         .setMarginBottom(40)  
         .setChartTitleText("Sales per employee weekday");  

      chart.getXAxis()  
         .setCategories("Alexander", "Marie", "Maximillian", "Sophia", "Lukas", "Maria", "Leon", "Anna", "Tim", "Laura");  

      chart.getYAxis()  
         .setCategories("Monday", "Tuesday", "Wednesday", "Thursday", "Friday")  
         .setAxisTitle(null);  

      chart.setColorAxis(new ColorAxis()  
         .setMin(0)  
         .setMinColor("#FFFFFF")  
         .setMaxColor("#4572A7")  
      );  

      chart.setLegend(new Legend()  
         .setAlign(Legend.Align.RIGHT)  
         .setLayout(Legend.Layout.VERTICAL)  
         .setMargin(0)  
         .setVerticalAlign(Legend.VerticalAlign.TOP)  
         .setY(25)  
         .setSymbolHeight(320)  
      );  

      chart.setToolTip(new ToolTip()  
         .setFormatter(new ToolTipFormatter() {  
            @Override  
            public String format(ToolTipData toolTipData) {  
               return toolTipData.getPoint().getValue() + " items on ";  
            }  
         })  
      );  

      chart.addSeries(chart.createSeries()  
         .setOption("borderWidth", 1)  
         .setName("Sales per employee")  
         .setPlotOptions(new HeatmapPlotOptions()  
            .setDataLabels(new DataLabels()  
               .setEnabled(true)  
               .setColor("#000000")  
               .setStyle(new Style()  
                  .setOption("textShadow", "none")  
                  .setOption("HcTextStroke", null)  
               )  
            )  
         )  
         .setPoints(new Number[][]{  
            {0, 0, 10}, {0, 1, 19}, {0, 2, 8}, {0, 3, 24}, {0, 4, 67},  
            {1, 0, 92}, {1, 1, 58}, {1, 2, 78}, {1, 3, 117}, {1, 4, 48},  
            {2, 0, 35}, {2, 1, 15}, {2, 2, 123}, {2, 3, 64}, {2, 4, 52},  
            {3, 0, 72}, {3, 1, 132}, {3, 2, 114}, {3, 3, 19}, {3, 4, 16},  
            {4, 0, 38}, {4, 1, 5}, {4, 2, 8}, {4, 3, 117}, {4, 4, 115},  
            {5, 0, 88}, {5, 1, 32}, {5, 2, 12}, {5, 3, 6}, {5, 4, 120},  
            {6, 0, 13}, {6, 1, 44}, {6, 2, 88}, {6, 3, 98}, {6, 4, 96},  
            {7, 0, 31}, {7, 1, 1}, {7, 2, 82}, {7, 3, 32}, {7, 4, 30},  
            {8, 0, 85}, {8, 1, 97}, {8, 2, 123}, {8, 3, 64}, {8, 4, 84},  
            {9, 0, 47}, {9, 1, 114}, {9, 2, 31}, {9, 3, 48}, {9, 4, 91}  
         })  
      );  
      RootPanel.get().add(chart);
   }
}

Resultado

Verifique el resultado.

↰ Previous page