GWT BarChart如何减少条形之间的空间并删除起始线

时间:2014-03-26 11:07:01

标签: java gwt

在我的项目中,我使用GWT图表 -

   <inherits name="com.googlecode.gwt.charts.Charts"/>

我想从所有条形图开始处删除垂直线,并减少条形图之间的间距。可能吗?我曾多次尝试,但我没有成功。 这是我的java代码:

  BarChart chart = new BarChart();

  BarChartOptions opt = BarChartOptions.create();
  opt.setEnableInteractivity(true);
  opt.setTitle("Statistic");


  DataTable dataTable = DataTable.create();
  dataTable.addColumn(ColumnType.STRING, "Name");
  dataTable.addColumn(ColumnType.NUMBER, "Stocks!");
  dataTable.addRows(3);

  dataTable.setValue(0, 0, "Units");
  dataTable.setValue(1, 0, "Stock");
  dataTable.setValue(2, 0, "Invoices");

  dataTable.setValue(0, 1, 743644);
  dataTable.setValue(1, 1, 22628);
  dataTable.setValue(2, 1, 10);

  // Draw the chart
  chart.draw(dataTable, opt);

Barchart

I found the way to reduce the size between bars with this:
  ChartArea chartArea = ChartArea.create();
  chartArea.setHeight(50);
  opt.setChartArea(chartArea);

1 个答案:

答案 0 :(得分:2)

删除垂直轴线

您只能通过将垂直轴条设置为与背景相同的颜色来移除它。在这种情况下,白色:

AxisOptions hAxisOptions = AxisOptions.create();
hAxisOptions.setBaselineColor("#FFF");

opt.setHAxisOptions(hAxisOptions);

enter image description here

如果您还想删除网格线,请将它们设置为背景颜色,因为您可以指定的最小数字网格线为2:

opt.setGridlineColor("#FFF");

enter image description here

如果您希望轴线看起来与网格线相同,只需将它们设置为相同的颜色:

AxisOptions hAxisOptions = AxisOptions.create();
hAxisOptions.setBaselineColor("#CCC");
opt.setGridlineColor("#CCC");

opt.setHAxisOptions(hAxisOptions);

enter image description here

您可以查看Google Charts文档here,指定所有可能的条形图选项,以验证这是达到所需效果的唯一方法。它不仅仅是GWT Visualization API的限制。

减少条之间的空间

这似乎不是由GWT Visualization API直接支持,但谷歌图表支持它。通过添加本机JavaScript方法,您可以解决此限制。

首先,扩展 com.google.gwt.visualization.client.visualizations.corechart.Options 类以包含本机方法:

public class BarChartOptions extends Options {
    protected BarChartOptions() {
    }

    public final native void setGroupWidth(String groupWidth) /*-{
        this.bar = { groupWidth: groupWidth }
    }-*/;

    public static BarChartOptions create() {
        return JavaScriptObject.createObject().cast();
    }
}

新的setGroupWidth方法现在允许您将条形宽度指定为字符串百分比。例如。 &#34; 95%&#34;

BarChartOptions opts = BarChartOptions.create();
opts.setGroupWidth("95%");
// Set other chart options here

// E.g. Removing the axis line
AxisOptions axisOptions = AxisOptions.create();
axisOptions.setBaselineColor("#FFF");
opts.setHAxisOptions(axisOptions);

enter image description here