馅饼与传说（Pie with Legends）

优质

小牛编辑

134浏览

2023-12-01

以下是带有图例的饼图示例。

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

下面给出了带有图例的饼图的示例。

配置 (Configurations)

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

图表

将图表类型配置为“饼图”。 chart.type决定图表的系列类型。这里，默认值是“line”。

chart.setType(Type.PIE);

plotOptions

使用plotOptions.pie.showInLegend属性将plotOptions配置为在饼图中包含图例。

chart.setPiePlotOptions(new PiePlotOptions()
   .setAllowPointSelect(true)  
   .setCursor(Cursor.POINTER)  
   .setPieDataLabels(new PieDataLabels()
      .setEnabled(false)  
   )
   .setShowInLegend(true)  
)

例子 (Example)

HelloWorld.java

package cn.xnip.client;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.Style;
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.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.PieDataLabels;
import org.moxieapps.gwt.highcharts.client.labels.Labels.Align;
import org.moxieapps.gwt.highcharts.client.labels.XAxisLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnRangePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PiePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Cursor;
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() {
      final Chart chart = new Chart()  
         .setType(Type.PIE)  
         .setChartTitleText("Browser market shares at a specific website, 2010")  
         .setPlotBackgroundColor((String)null)
         .setPlotBorderWidth(null)  
         .setPlotShadow(false) 
         .setPiePlotOptions(new PiePlotOptions()
            .setAllowPointSelect(true)  
            .setCursor(Cursor.POINTER)  
            .setPieDataLabels(new PieDataLabels()
               .setEnabled(false)  
            )
            .setShowInLegend(true)  
         )           
         .setToolTip(new ToolTip()  
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  return "<b>" + toolTipData.getPointName() + "</b>: " + toolTipData.getYAsDouble() + " %"; 
               }
            }) 
         );
         chart.addSeries(chart.createSeries()  
            .setName("Browser share")  
            .setPoints(new Point[]{  
               new Point("Firefox", 45.0),  
               new Point("IE", 26.8),  
               new Point("Chrome", 12.8)  
                  .setSliced(true)  
                  .setSelected(true),  
               new Point("Safari", 8.5),  
               new Point("Opera", 6.2),  
               new Point("Others", 0.7)  
            })              
         );	        
      RootPanel.get().add(chart);
   }
}

结果 (Result)

验证结果。