如何在PrimeFaces BarChartModel中仅调整柱子宽度而不改变整体图表

AI 小北

2026-6-30

调整PrimeFaces BarChart柱子宽度（不改变图表整体尺寸）

我用PrimeFaces的BarChartModel创建的柱状图运行正常，但需要仅调整柱子的宽度，不改变整个图表的尺寸。以下是当前代码：

Java代码

private void createTaxaRetornoEventosBarModel(){

    this.taxaRetornoEventosBarModel = new BarChartModel();
    ChartData data = new ChartData();
    
    BarChartDataSet barDataSet = new BarChartDataSet();
    barDataSet.setLabel("My First Dataset");
    
    List<Number> values = new ArrayList<>();
    values.add(65);
    values.add(59);
    values.add(80);
    values.add(81);
    values.add(56);
    values.add(55);
    values.add(40);
    barDataSet.setData(values);
    
    List<String> bgColor = new ArrayList<>();
    bgColor.add("rgba(255, 99, 132, 0.2)");
    bgColor.add("rgba(255, 159, 64, 0.2)");
    bgColor.add("rgba(255, 205, 86, 0.2)");
    bgColor.add("rgba(75, 192, 192, 0.2)");
    bgColor.add("rgba(54, 162, 235, 0.2)");
    bgColor.add("rgba(153, 102, 255, 0.2)");
    bgColor.add("rgba(201, 203, 207, 0.2)");
    barDataSet.setBackgroundColor(bgColor);
    
    List<String> borderColor = new ArrayList<>();
    borderColor.add("rgb(255, 99, 132)");
    borderColor.add("rgb(255, 159, 64)");
    borderColor.add("rgb(255, 205, 86)");
    borderColor.add("rgb(75, 192, 192)");
    borderColor.add("rgb(54, 162, 235)");
    borderColor.add("rgb(153, 102, 255)");
    borderColor.add("rgb(201, 203, 207)");
    barDataSet.setBorderColor(borderColor);
    barDataSet.setBorderWidth(1);
    
    data.addChartDataSet(barDataSet);
    
    List<String> labels = new ArrayList<>();
    labels.add("January");
    labels.add("February");
    labels.add("March");
    labels.add("April");
    labels.add("May");
    labels.add("June");
    labels.add("July");
    data.setLabels(labels);

    this.taxaRetornoEventosBarModel.setData(data);
    
    BarChartOptions options = new BarChartOptions();
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();
    CartesianLinearTicks ticks = new CartesianLinearTicks();
    ticks.setBeginAtZero(true);
    linearAxes.setTicks(ticks);
    cScales.addYAxesData(linearAxes);
    options.setScales(cScales);
    
    Title title = new Title();
    title.setDisplay(true);
    title.setText("Bar Chart");
    options.setTitle(title);

    Legend legend = new Legend();
    legend.setDisplay(false);
    legend.setPosition("top");
    LegendLabel legendLabels = new LegendLabel();
    legendLabels.setFontStyle("bold");
    legendLabels.setFontColor("#2980B9");
    legendLabels.setFontSize(24);
    legend.setLabels(legendLabels);
    options.setLegend(legend);

    this.taxaRetornoEventosBarModel.setOptions(options);
}

XHTML及CSS代码

<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:p="http://primefaces.org/ui">


    <div class="mt-5 d-flex justify-content-center" style="width: 100%; overflow-x: auto;">
        <div style="width: max-content;">
            <p:barChart model="#{MB.taxaRetornoEventosBarModel}" style="height: 400px; width: 1100px;"/>
        </div>
    </div>

</ui:composition>

解决方案

PrimeFaces的BarChart基于Chart.js实现，要调整柱子宽度且不改变图表整体尺寸，可通过以下两种方式配置：

1. 设置固定柱子宽度（推荐）

在BarChartOptions中添加Bar配置，设置barThickness属性（单位：像素），直接指定柱子的固定宽度：

// 在创建BarChartOptions后添加以下代码
Bar bar = new Bar();
bar.setBarThickness(40); // 设置柱子宽度为40px，可根据需求调整
options.setBar(bar);

2. 设置相对宽度比例

如果需要按比例调整柱子宽度（相对于分类间距），可设置两个比例参数：

barPercentage：柱子占分类宽度的比例（取值0-1）
categoryPercentage：分类占可用宽度的比例（取值0-1）

Bar bar = new Bar();
bar.setBarPercentage(0.6); // 柱子占分类宽度的60%
bar.setCategoryPercentage(0.8); // 分类占可用宽度的80%
options.setBar(bar);

修改后的完整Java代码（以固定宽度为例）

private void createTaxaRetornoEventosBarModel(){

    this.taxaRetornoEventosBarModel = new BarChartModel();
    ChartData data = new ChartData();
    
    BarChartDataSet barDataSet = new BarChartDataSet();
    barDataSet.setLabel("My First Dataset");
    
    List<Number> values = new ArrayList<>();
    values.add(65);
    values.add(59);
    values.add(80);
    values.add(81);
    values.add(56);
    values.add(55);
    values.add(40);
    barDataSet.setData(values);
    
    List<String> bgColor = new ArrayList<>();
    bgColor.add("rgba(255, 99, 132, 0.2)");
    bgColor.add("rgba(255, 159, 64, 0.2)");
    bgColor.add("rgba(255, 205, 86, 0.2)");
    bgColor.add("rgba(75, 192, 192, 0.2)");
    bgColor.add("rgba(54, 162, 235, 0.2)");
    bgColor.add("rgba(153, 102, 255, 0.2)");
    bgColor.add("rgba(201, 203, 207, 0.2)");
    barDataSet.setBackgroundColor(bgColor);
    
    List<String> borderColor = new ArrayList<>();
    borderColor.add("rgb(255, 99, 132)");
    borderColor.add("rgb(255, 159, 64)");
    borderColor.add("rgb(255, 205, 86)");
    borderColor.add("rgb(75, 192, 192)");
    borderColor.add("rgb(54, 162, 235)");
    borderColor.add("rgb(153, 102, 255)");
    borderColor.add("rgb(201, 203, 207)");
    barDataSet.setBorderColor(borderColor);
    barDataSet.setBorderWidth(1);
    
    data.addChartDataSet(barDataSet);
    
    List<String> labels = new ArrayList<>();
    labels.add("January");
    labels.add("February");
    labels.add("March");
    labels.add("April");
    labels.add("May");
    labels.add("June");
    labels.add("July");
    data.setLabels(labels);

    this.taxaRetornoEventosBarModel.setData(data);
    
    BarChartOptions options = new BarChartOptions();
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();
    CartesianLinearTicks ticks = new CartesianLinearTicks();
    ticks.setBeginAtZero(true);
    linearAxes.setTicks(ticks);
    cScales.addYAxesData(linearAxes);
    options.setScales(cScales);
    
    // 新增：设置柱子宽度
    Bar bar = new Bar();
    bar.setBarThickness(40); // 自定义柱子宽度
    options.setBar(bar);
    
    Title title = new Title();
    title.setDisplay(true);
    title.setText("Bar Chart");
    options.setTitle(title);

    Legend legend = new Legend();
    legend.setDisplay(false);
    legend.setPosition("top");
    LegendLabel legendLabels = new LegendLabel();
    legendLabels.setFontStyle("bold");
    legendLabels.setFontColor("#2980B9");
    legendLabels.setFontSize(24);
    legend.setLabels(legendLabels);
    options.setLegend(legend);

    this.taxaRetornoEventosBarModel.setOptions(options);
}

内容的提问来源于stack exchange，提问作者Dev_Edimar FUll stack

如何在PrimeFaces BarChartModel中仅调整柱子宽度而不改变整体图表

Java代码 #

XHTML及CSS代码 #

解决方案 #