GWT Highcharts 使用范围的柱状图

GWT Highcharts 使用范围的柱状图 介绍

我们已经在《GWT Highcharts 入门案例》一章中看到了用于绘制此图表的步骤。现在让我们考虑以下示例以进一步了解使用范围的柱状图。

图表

将图表类型配置为基于“columnrange”。chart.type 决定图表的系列类型。默认值为“line”。

chart.setType(Type.COLUMN_RANGE) 

GWT Highcharts 使用范围的柱状图 示例

package com.yiidian.helloWorld.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.RootPanel;
import org.moxieapps.gwt.highcharts.client.*;
import org.moxieapps.gwt.highcharts.client.labels.*;
import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnRangePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.SeriesPlotOptions;

public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        final Chart chart = new Chart()
                .setType(Series.Type.COLUMN_RANGE)
                .setChartTitleText("Temperature variation by month")
                .setChartSubtitleText("Observed in Vik i Sogn, Norway, 2009")
                .setInverted(true)
                .setLegend(new Legend()
                        .setEnabled(false)
                )
                .setToolTip(new ToolTip()
                        .setValueSuffix("°C")
                )
                .setColumnRangePlotOptions(new ColumnRangePlotOptions()
                        .setDataLabels(new DataLabels()
                                .setEnabled(true)
                                .setY(0)
                                .setFormatter(new DataLabelsFormatter() {
                                    @Override
                                    public String format(DataLabelsData dataLabelsData) {
                                        return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble()) + " °C";
                                    }
                                })
                        )
                );

        chart.getXAxis()
                .setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                )
                .setLabels(new XAxisLabels()
                        .setRotation(-45)
                        .setAlign(Labels.Align.RIGHT)
                        .setStyle(new Style()
                                .setFont("normal 13px Verdana, sans-serif")
                        )
                );
        chart.getYAxis()
                .setMin(0)
                .setAxisTitleText("Temperature ( °C )");

        chart.addSeries(chart.createSeries()
                .setName("Temperatures")
                .setPoints(new Number[][]{
                        {-9.7, 9.4},
                        {-8.7, 6.5},
                        {-3.5, 9.4},
                        {-1.4, 19.9},
                        {0.0, 22.6},
                        {2.9, 29.5},
                        {9.2, 30.7},
                        {7.3, 26.5},
                        {4.4, 18.0},
                        {-3.1, 11.4},
                        {-5.2, 10.4},
                        {-13.5, 9.8}
                })
        );
        RootPanel.get().add(chart);
    }
}

输出结果为：