BarChartModel 如何仅调整条形宽度而不更改整个图表

Question

我无法仅更改条形的宽度。现在，图表工作正常，但我只需要调整条形的宽度，而不更改整个图表。我怎样才能做到这一点？ 请让我知道该怎么做。以下是我当前的代码。

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>   

Answer 1

使用扩展器！因为，与日历模块类似，该小部件基于外部库 Chart.js

轻松开始 - 检查此列表的底部： https://primefaces.github.io/primefaces/13_0_0/#/components/charts?id=barchart

然后，清除所有其他扩展器属性（除了您已经使用的属性）并添加“barThickness”属性。尝试一下，这里是指南，只有几行文字： https://www.chartjs.org/docs/latest/charts/bar.html#barthickness