GWT Highcharts - Carte thermique

Voici un exemple de graphique de carte thermique.

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de graphique de carte thermique est donné ci-dessous.

Configurations

Voyons maintenant les configurations / étapes supplémentaires prises.

graphique

Configurez le type de graphique pour qu'il soit basé sur la «carte thermique». chart.typedécide du type de série du graphique. Ici, la valeur par défaut est "line".

chart.setType(Type.HEATMAP);

Exemple

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

Résultat

Vérifiez le résultat.