GWT Highcharts 3D柱状图

GWT Highcharts 3D柱状图 介绍

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

option3D

将柱形图类型配置为基于 3D。Options3D设置启用的 3D 选项。

chart.setOptions3D(new Options3D()  
   .setEnabled(true)  
   .setAlpha(15)  
   .setBeta(15)  
   .setViewDistance(25)  
   .setDepth(40)  
)  

GWT Highcharts 3D柱状图 示例

package com.yiidian.helloWorld.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import org.moxieapps.gwt.highcharts.client.*;
import org.moxieapps.gwt.highcharts.client.plotOptions.*;


public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        final Chart chart = new Chart()
                .setType(Series.Type.COLUMN)
                .setOptions3D(new Options3D()
                        .setEnabled(true)
                        .setAlpha(15)
                        .setBeta(15)
                        .setViewDistance(25)
                        .setDepth(40)
                )
                .setMarginTop(80)
                .setMarginRight(40)
                .setChartTitleText("Total Fruit Consumption, grouped by gender");

        chart.getXAxis()
                .setCategories("Apples", "Oranges", "Pears", "Grapes", "Bananas");

        chart.getYAxis()
                .setAllowDecimals(false)
                .setMin(0)
                .setAxisTitle(new AxisTitle()
                        .setText("Number of Fruits")
                );

        chart.setToolTip(new ToolTip()
                .setHeaderFormat("<b>{point.key}</b><br>")
                .setPointFormat("<span style=\"color:{series.color}\">\\u25CF</span> {series.name}: {point.y} / {point.stackTotal}")
        );

        chart.setColumnPlotOptions(new ColumnPlotOptions()
                .setStacking(PlotOptions.Stacking.NORMAL)
                .setDepth(40)
        );

        chart.addSeries(chart.createSeries()
                .setName("John")
                .setStack("male")
                .setPoints(new Number[] {5, 3, 4, 7, 2})
        )
                .addSeries(chart.createSeries()
                        .setName("Joe")
                        .setStack("male")
                        .setPoints(new Number[] {3, 4, 4, 2, 5})
                )
                .addSeries(chart.createSeries()
                        .setName("Jane")
                        .setStack("female")
                        .setPoints(new Number[] {2, 5, 6, 2, 1})
                )
                .addSeries(chart.createSeries()
                        .setName("Janet")
                        .setStack("female")
                        .setPoints(new Number[] {3, 0, 4, 4, 3})
                );
        RootPanel.get().add(chart);
    }
}

输出结果为：