代码之家  ›  专栏  ›  技术社区  ›  SDS

Vaadin 8图表删除绘图和标题之间的多余空间

  •  0
  • SDS  · 技术社区  · 7 年前

    我正在使用Vaadin8图表加载项创建网格布局中的仪表,如下面的快照所示。我正在尝试删除图表和标题区域之间用红色突出显示的多余间距。 enter image description here

    创建仪表的代码段

    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;
    }
    

    关于如何删除多余的空间有什么建议吗????

    蒂亚

    2 回复  |  直到 7 年前
        1
  •  1
  •   SDS    7 年前

    经过多次尝试,终于找到了解决方案。 将下面的行添加到对我有用的仪表中,这是结果的快照

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

    enter image description here

        2
  •  -1
  •   DaveyDaveDave max    7 年前

    你试过缩小间距吗?

    大多数HighCharts API调用可以与Vaadin图表一起使用:

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

    间距:阵列。
    从3.0.6开始

    图表外缘与内容(如标题或图例)或轴标题和标签(如有)之间的距离。数组中的数字分别表示顶部、右侧、底部和左侧。使用选项spacingtop、spacingright、spacingbottom和spacingleft选项进行一个选项的速记设置。

    默认为[10,10,15,10]。