Vaadin 8 Chart 刪除情節和標題之間的多余空間

Question

我正在使用 Vaadin 8 圖表插件在 gridLayout 中創建儀表，如下面的快照所示。 我試圖刪除圖表和標題區域之間的多余間距，如紅色突出顯示。

用於創建儀表的代碼片段

private Chart gauge(Number newValue, String tooltip) {

    final Chart chart = new Chart();
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.getChart().setAlignTicks(false);
    configuration.getChart().setWidth(200);
    configuration.getChart().setHeight(200);
    configuration.getChart().setSpacingTop(0);
    configuration.getTitle().setMargin(0);
    configuration.getChart().setPlotBackgroundColor(SolidColor.GREENYELLOW);
    configuration.getChart().setPlotBackgroundImage(null);
    configuration.getChart().setPlotBorderWidth(0);
    configuration.getChart().setPlotShadow(false);
    configuration.getChart().setBackgroundColor(null);
    configuration.getChart().setMarginTop(0);
    configuration.getChart().setMarginBottom(0);

    configuration.getPane().setStartAngle(-150);
    configuration.getPane().setEndAngle(150);

    YAxis yAxis = new YAxis();
    // The limits are mandatory
    yAxis.setMin(0);
    yAxis.setMax(100);

    // Other configuration
    yAxis.getLabels().setStep(1);
    yAxis.setTickInterval(10);
    yAxis.setPlotBands(new PlotBand[] { new PlotBand(0, 40, SolidColor.GREEN),
            new PlotBand(40, 80, SolidColor.YELLOW), new PlotBand(80, 100, SolidColor.RED) });

    configuration.addyAxis(yAxis);

    final ListSeries series = new ListSeries(tooltip, 80);

    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    plotOptionsGauge.setDataLabels(new DataLabels());
    // plotOptionsGauge.getDataLabels()
    // .setFormatter("function() {return '<span style=\"color:#339\">'+
    // this.y + ' %</span>';}");

    plotOptionsGauge.setTooltip(new SeriesTooltip());
    plotOptionsGauge.getTooltip().setValueSuffix(" %");
    series.setPlotOptions(plotOptionsGauge);

    configuration.setSeries(series);

    series.updatePoint(0, newValue);

    chart.drawChart();

    return chart;
}

有關如何刪除多余空間的任何指示？？？

TIA

Answer 1

終於，經過多次嘗試找到了解決方案。 在儀表中添加以下行對我有用，這是結果的快照

configuration.getPane().setSize(95, Unit.PERCENTAGE);

Answer 2

我發現將標題設置為浮動有幫助，因為情節計算不考慮標題：

yourchart.getConfiguration().getTitle().setFloating(true);

Answer 3

您是否嘗試過縮小間距？

大多數 highcharts API 調用都可以與 vaadin-charts 一起使用：

https://api.highcharts.com/highcharts/chart.spacing

間距：陣列。
自 3.0.6

圖表外邊緣與內容（如標題或圖例，或軸標題和標簽（如果存在））之間的距離。 數組中的數字分別表示頂部、右側、底部和左側。 使用spacingTop、spacingRight、spacingBottom 和spacingLeft 選項對一個選項進行速記設置。

默認為 [10, 10, 15, 10]。