目录

3D Column

以下是3D柱形图的示例。

我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置

下面给出了3D柱形图的示例。

配置 (Configurations)

现在让我们看一下所采取的其他配置/步骤。

option3D

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

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

例子 (Example)

HelloWorld.java

package com.iowiki.client;
import org.moxieapps.gwt.highcharts.client.AxisTitle;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Options3D;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;
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.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(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);
   }
}

结果 (Result)

验证结果。

3D柱形图
↑回到顶部↑
WIKI教程 @2018