目录

缺少积分的区域(Area with missing points)

以下是缺少值的区域图的示例。

我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 现在,让我们看一个缺少值的区域图的示例。 我们在图表中添加了spacingBottom属性。

图表

将图表的spacingBottom配置为30.它表示图表底边与内容之间的空间(绘图区域,轴标题和顶部位置的标题,标题,副标题或图例)。

chart.setSpacingBottom(30);  

例子 (Example)

HelloWorld.java

package com.iowiki.client;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.ChartSubtitle;
import org.moxieapps.gwt.highcharts.client.ChartTitle.Align;
import org.moxieapps.gwt.highcharts.client.ChartTitle.VerticalAlign;
import org.moxieapps.gwt.highcharts.client.Credits;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.AreaPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.AREA)  
         .setChartTitleText("Fruit consumption *")  
         .setChartSubtitle(new ChartSubtitle()  
            .setText("* Jane's banana consumption is unknown")  
            .setFloating(true)  
            .setAlign(Align.RIGHT)  
            .setVerticalAlign(VerticalAlign.BOTTOM)  
            .setY(15)  
         )  
         .setSpacingBottom(30)  
         .setLegend(new Legend()  
            .setLayout(Legend.Layout.VERTICAL)  
            .setAlign(Legend.Align.LEFT)  
            .setVerticalAlign(Legend.VerticalAlign.TOP)  
            .setX(150)  
            .setY(100)  
            .setFloating(true)  
            .setBorderWidth(1)  
            .setBackgroundColor("#FFFFFF")  
         )  
         .setToolTip(new ToolTip()  
            .setFormatter(  
               new ToolTipFormatter() {  
                  public String format(ToolTipData toolTipData) {  
                     return "<b>" + toolTipData.getSeriesName() + "</b<<br/>" +  
	                     toolTipData.getXAsString() + ": " + toolTipData.getYAsLong();  
                  }  
               }  
            )  
         )  
         .setCredits(new Credits()  
            .setEnabled(false)  
         )  
         .setAreaPlotOptions(new AreaPlotOptions()  
            .setFillOpacity(0.5)  
      );  
      chart.getXAxis()  
         .setCategories(  
            "Apples", "Pears", "Oranges", "Bananas", "Grapes", "Plums", "Strawberries", "Raspberries"  
         );  
      chart.getYAxis()  
         .setAxisTitleText("Y-Axis")  
         .setLabels(new YAxisLabels()  
         .setFormatter(new AxisLabelsFormatter() {  
            public String format(AxisLabelsData axisLabelsData) {  
               return String.valueOf(axisLabelsData.getValueAsLong());  
            }  
         })  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("John")  
         .setPoints(new Number[] {0, 1, 4, 4, 5, 2, 3, 7})  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("Jane")  
         .setPoints(new Number[] {1, 0, 3, null, 3, 1, 2, 1})  
      );  
      RootPanel.get().add(chart);
   }
}

结果 (Result)

验证结果。

缺少值的区域图表
↑回到顶部↑
WIKI教程 @2018