Série chronologique, graphique zoomable

Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration Highcharts . Considérons maintenant l'exemple suivant pour mieux comprendre une série chronologique, graphique zoomable.

Configurations

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

graphique

Configurez le graphique pour le rendre zoomable. chart.zoomTypedécide des dimensions selon lesquelles l'utilisateur peut zoomer en faisant glisser la souris. Les valeurs possibles pour cela sont x, y ou xy.

chart.setZoomType(BaseChart.ZoomType.X)

plotOptions

Configurez la zone du graphique à l'aide de plotOptions.

chart.setAreaPlotOptions(new AreaPlotOptions()
   .setFillColor(new Color()
     .setLinearGradient(0, 0, 0, 1)
     .addColorStop(0, 69, 114, 167)  
     .addColorStop(1, 2, 0, 0, 0)  
   )
   .setMarker(new Marker()  
      .setEnabled(false)  
      .setHoverState(new Marker()  
         .setEnabled(true)  
         .setRadius(5)  
      )  
   )  
   .setShadow(false)  
   .setHoverStateLineWidth(1)  
);

Exemple

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Axis;
import org.moxieapps.gwt.highcharts.client.BaseChart;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Color;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.plotOptions.AreaPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setZoomType(BaseChart.ZoomType.X)
         .setSpacingRight(20)  
         .setChartTitleText("USD to EUR exchange rate from 2006 through 2008")
         .setChartSubtitleText("Click and drag in the plot area to zoom in")
         .setLegend(new Legend()
            .setEnabled(false))  
         .setToolTip(new ToolTip()  
            .setShared(true)  
         )
         .setLegend(new Legend()
            .setEnabled(false)
         )
         .setAreaPlotOptions(new AreaPlotOptions()
            .setFillColor(new Color()
               .setLinearGradient(0, 0, 0, 1)
               .addColorStop(0, 69, 114, 167)  
               .addColorStop(1, 2, 0, 0, 0)  
            )
         .setMarker(new Marker()  
            .setEnabled(false)  
            .setHoverState(new Marker()  
               .setEnabled(true)  
               .setRadius(5)  
            )  
         )  
         .setShadow(false)  
            .setHoverStateLineWidth(1)  
         );  

      chart.getXAxis()
         .setType(Axis.Type.DATE_TIME)
         .setMaxZoom(14 * 24 * 3600000) //fourteen days
         .setAxisTitleText(null);  

      chart.getYAxis()
         .setAxisTitleText("Exchange rate")
         .setMin(0.6)  
         .setStartOnTick(false)  
         .setShowFirstLabel(false); 

      chart.addSeries(chart.createSeries()
         .setType(Series.Type.AREA)
         .setName("USD to EUR")
         .setPlotOptions(new AreaPlotOptions()  
            .setPointInterval(24 * 3600 * 1000)  
            .setPointStart(getTime("2006-01-01"))  
         )  
         .setPoints(new Number[] {
            0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232,
            0.7158, 0.714,  0.7119, 0.7129, 0.7129, 0.7049, 0.7095
         })
      ); 
      RootPanel.get().add(chart);
   } 
   private static final DateTimeFormat dateTimeFormat = DateTimeFormat.getFormat("yyyy-MM-dd"); 
   private long getTime(String date) {  
      return dateTimeFormat.parse(date).getTime();  
   }  
}

Résultat

Vérifiez le résultat.