GWT谷歌图表 - 组合图表

组合图有助于将每个系列渲染为以下列表中的不同标记类型:线条，区域，条形，烛台和阶梯区域.要为系列指定默认标记类型，请使用seriesType属性. Series属性用于单独指定每个系列的属性.以下是显示差异的柱形图示例.

我们已经看到用于在 Google图表配置语法一章.现在，让我们看一个显示差异的柱形图示例.

配置

我们使用了 ComboChart 类显示组合图.

// Combination chartComboChart chart = new ComboChart();

示例

HelloWorld.java

package com.it1352.client; import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.ui.RootPanel;import com.googlecode.gwt.charts.client.ChartLoader;import com.googlecode.gwt.charts.client.ChartPackage;import com.googlecode.gwt.charts.client.ColumnType;import com.googlecode.gwt.charts.client.DataTable;import com.googlecode.gwt.charts.client.corechart.ComboChart;import com.googlecode.gwt.charts.client.corechart.ComboChartOptions;import com.googlecode.gwt.charts.client.corechart.ComboChartSeries;import com.googlecode.gwt.charts.client.options.HAxis;import com.googlecode.gwt.charts.client.options.SeriesType;import com.googlecode.gwt.charts.client.options.VAxis;public class HelloWorld implements EntryPoint {   private ComboChart chart;   private void initialize() {      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);      chartLoader.loadApi(new Runnable() {         public void run() {            // Create and attach the chart            chart = new ComboChart();            RootPanel.get().add(chart);            draw();         }      });   }   private void draw() {      // Prepare the data      DataTable data = DataTable.create();      data.addColumn(ColumnType.STRING, "Fruits");      data.addColumn(ColumnType.NUMBER, "Jane");      data.addColumn(ColumnType.NUMBER, "Jone");      data.addColumn(ColumnType.NUMBER, "Average");            data.addRow("Apples", 3, 2, 2.5);      data.addRow("Oranges",2, 3, 2.5);      data.addRow("Pears", 1, 5, 3);      data.addRow("Bananas", 3, 9, 6);          data.addRow("Plums", 4, 2, 3);                // Set options      ComboChartOptions options = ComboChartOptions.create();      options.setTitle("Fruits distribution");      options.setHAxis(HAxis.create("Person"));      options.setVAxis(VAxis.create("Fruits"));      options.setSeriesType(SeriesType.BARS);      ComboChartSeries lineSeries = ComboChartSeries.create();      lineSeries.setType(SeriesType.LINE);      options.setSeries(2,lineSeries);      // Draw the chart      chart.draw(data,options);      chart.setWidth("400px");      chart.setHeight("400px");   }   public void onModuleLoad() {      initialize();   }}

结果

验证结果.