Serie storica, grafico ingrandibile
Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Highcharts . Consideriamo ora il seguente esempio per comprendere ulteriormente una serie storica, grafico ingrandibile.
Configurazioni
Parliamo ora delle configurazioni / passaggi aggiuntivi eseguiti.
grafico
Configura il grafico per renderlo zoomabile. chart.zoomTypedecide le dimensioni di cui l'utente può zoomare trascinando il mouse. I possibili valori per questo sono x, yo xy.
chart.setZoomType(BaseChart.ZoomType.X)
plotOptions
Configurare l'area del grafico utilizzando 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)
);
Esempio
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();
}
}
Risultato
Verifica il risultato.