You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

PrimeFaces水平条形图:移除多余区域与缩短轴边距问题

解决PrimeFaces p:barChart的两个布局需求

需求1:完全移除黄框标注区域(Y轴刻度/标签区域)

黄框对应Y轴的刻度与标签区域,要彻底移除,需单独配置Y轴并关闭其显示及刻度:

  1. 拆分原代码中X轴与Y轴的共用配置,分别定义X、Y轴的独立配置
  2. 对Y轴设置setDisplay(false)关闭整体显示,同时配置ticks.setDisplay(false)确保刻度完全隐藏

修改后的核心配置代码:

// X轴配置(保留堆叠、网格线隐藏等原有设置)
CartesianLinearAxes xAxes = new CartesianLinearAxes();
xAxes.setStacked(true);
xAxes.setGridLines(gridLines);
xAxes.setScaleLabel(label);

// Y轴配置(完全隐藏)
CartesianLinearAxes yAxes = new CartesianLinearAxes();
yAxes.setStacked(true);
yAxes.setGridLines(gridLines);
yAxes.setScaleLabel(label);
yAxes.setDisplay(false); // 关闭Y轴整体显示
CartesianTicks yTicks = new CartesianTicks();
yTicks.setDisplay(false); // 关闭Y轴刻度
yAxes.setTicks(yTicks);

// 将配置添加到刻度集
CartesianScales cScales = new CartesianScales();
cScales.addXAxesData(xAxes);
cScales.addYAxesData(yAxes);

需求2:缩短绿箭头指示区域(图表左右内边距)

绿箭头对应图表左右两侧的空白区域,可通过调整布局内边距和X轴偏移来缩短:

  1. 添加Layout配置,设置更小的左右内边距
  2. 关闭X轴的offset属性,移除两端额外空白;同时减少X轴刻度的内边距

修改后的核心配置代码:

// 布局内边距配置
Layout layout = new Layout();
Padding padding = new Padding();
padding.setLeft(5); // 根据需求调整左侧内边距
padding.setRight(5); // 根据需求调整右侧内边距
layout.setPadding(padding);

// X轴额外调整(减少刻度内边距+关闭偏移)
CartesianTicks xTicks = new CartesianTicks();
xTicks.setPadding(2);
xAxes.setTicks(xTicks);
xAxes.setOffset(false);

// 将布局配置加入图表选项
BarChartOptions options = new BarChartOptions();
options.setScales(cScales);
options.setTooltip(tooltip);
options.setOffsetGridLines(false);
options.setLayout(layout);

修正后的完整Bean代码

private void chartSettings() {
    // 初始化图表模型与数据
    stackedBarModel = new HorizontalBarChartModel();
    ChartData data = new ChartData();

    // 循环生成数据集(注意:将数据集对象创建移至循环内,避免数据覆盖)
    for (int i = 0; i < kko.getKazanclarList().size(); i++) {
        HorizontalBarChartDataSet barDataSet = new HorizontalBarChartDataSet();
        int oran = (int) Math.floor(kko.getKazanclarList().get(i).getTutar() / kko.getKazancToplam() * 100);

        barDataSet.setLabel(kko.getKazanclarList().get(i).getMetinAlani() + " %" + oran);
        barDataSet.setBackgroundColor(rgbArray[i]);
        List<Number> dataVal = new ArrayList<Number>();
        dataVal.add(kko.getKazanclarList().get(i).getTutar());
        barDataSet.setData(dataVal);

        data.addChartDataSet(barDataSet);
    }

    stackedBarModel.setData(data);

    // 通用刻度标签与网格线配置
    CartesianScaleLabel label = new CartesianScaleLabel();
    label.setDisplay(false);
    
    AxesGridLines gridLines = new AxesGridLines();
    gridLines.setDisplay(false);

    // X轴配置
    CartesianLinearAxes xAxes = new CartesianLinearAxes();
    xAxes.setStacked(true);
    xAxes.setGridLines(gridLines);
    xAxes.setScaleLabel(label);
    CartesianTicks xTicks = new CartesianTicks();
    xTicks.setPadding(2);
    xAxes.setTicks(xTicks);
    xAxes.setOffset(false);

    // Y轴配置
    CartesianLinearAxes yAxes = new CartesianLinearAxes();
    yAxes.setStacked(true);
    yAxes.setGridLines(gridLines);
    yAxes.setScaleLabel(label);
    yAxes.setDisplay(false);
    CartesianTicks yTicks = new CartesianTicks();
    yTicks.setDisplay(false);
    yAxes.setTicks(yTicks);

    CartesianScales cScales = new CartesianScales();
    cScales.addXAxesData(xAxes);
    cScales.addYAxesData(yAxes);
    
    Tooltip tooltip = new Tooltip();
    tooltip.setEnabled(false);
    
    // 布局内边距配置
    Layout layout = new Layout();
    Padding padding = new Padding();
    padding.setLeft(5);
    padding.setRight(5);
    layout.setPadding(padding);
    
    BarChartOptions options = new BarChartOptions();
    options.setScales(cScales);
    options.setTooltip(tooltip);
    options.setOffsetGridLines(false);
    options.setLayout(layout);

    stackedBarModel.setOptions(options);
}

注:原代码中barDataSet对象创建在循环外,会导致所有数据集引用同一个对象,最终仅显示最后一条数据,已修正为在循环内创建对象。

内容的提问来源于stack exchange,提问作者Cemal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 19:25:49