如何使用 PrimeFaces 为 JSF BarChart 实现水平滚动条？

Question

我发现自己沉浸在一个涉及 JSF 技术与 PrimeFaces 库协同的项目中，并且遇到了一个值得考虑的挑战。我需要有关在条形图中实现水平滚动条所采用的方法的指导。出现这种需求的原因是来自后端层的数据可能过载，因此该数据的完全可见性需要存在上述滚动条。

XHTML：

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    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:p="http://primefaces.org/ui">


    <div class="dashboardPercentualEntregasPorBase-card rounded">
    
            <p:barChart model="#{MB.percentualEntregaPorBase}" 
                        styleClass="percentual-de-entregas"
                        style="width: 100%; height: 250px;" />

    </div>



</ui:composition>

CSS：

.dashboardPercentualEntregasPorBase-card{
    
    width: 98%;
    height: 100%;

    box-shadow: 3px 7px 9px -1px rgba(0,0,0,0.64);
    -webkit-box-shadow: 3px 7px 9px -1px rgba(0,0,0,0.64);
    -moz-box-shadow: 3px 7px 9px -1px rgba(0,0,0,0.64);
}
.percentual-de-entregas{
    overflow: auto;
    overflow-x: scroll;
}

从 Java 代码中，下面的 BarChartModel 中初始化的值被模拟用于前端测试目的。我将它们放在这里以防滚动条是后端属性。这就是报告。

   private void createPercentualEntregaPorBase() {
        this.percentualEntregaPorBase = new BarChartModel();
        ChartData data = new ChartData();
        
        BarChartDataSet barDataSet = new BarChartDataSet();
        barDataSet.setLabel("Concluidos");
        barDataSet.setBackgroundColor("#08B408");
        barDataSet.setStack("Stack 0");
        List<Number> dataVal = Arrays.asList(45, 68, 84, 58, 57, 48, 86, 60, 94, 45,100,90,80,70,60,50,90, 45, 68, 84, 58, 57, 48, 86, 60, 94, 45,100,90,80,70,60,50,90,100,90,80,70,60,50,90, 50,90,100,90,80,70,60,50,90,50,90,100,90,80,70,60,50,90);
        barDataSet.setData(dataVal);
        
        BarChartDataSet barDataSet2 = new BarChartDataSet();
        barDataSet2.setLabel("Retornos");
        barDataSet2.setBackgroundColor("#FF0000");
        barDataSet2.setStack("Stack 0");
        List<Number> dataVal2 = Arrays.asList(40, 55, 80, 56, 55, 40, 81, 56, 90, 40,80,95,83,74,68,57,80, 40, 55, 80, 56, 55, 40, 81, 56, 90, 40,80,95,83,74,68,57,80, 101,92,81,71,62,51,91);
        barDataSet2.setData(dataVal2);
     
        data.addChartDataSet(barDataSet);
        data.addChartDataSet(barDataSet2);
  
        List<String> labels =  new ArrayList<>();

        for (int i = 1; i <= 42; i++) {
            labels.add("CD " + i);
        }

        data.setLabels(labels);
        this.percentualEntregaPorBase.setData(data);
        
        //Options
        BarChartOptions options = new BarChartOptions();
        CartesianScales cScales = new CartesianScales();
        CartesianLinearAxes linearAxes = new CartesianLinearAxes();
        linearAxes.setStacked(true);    
        cScales.addXAxesData(linearAxes);
        cScales.addYAxesData(linearAxes);
        options.setScales(cScales);
        
        Title title = new Title();
        title.setDisplay(true);
        title.setText("Percentual de entregas por base");
        options.setTitle(title);
        
        Tooltip tooltip = new Tooltip();
        tooltip.setMode("index");
        tooltip.setIntersect(false);
        options.setTooltip(tooltip);
        Legend legend = new Legend();
        legend.setDisplay(false);
        options.setLegend(legend);

        this.percentualEntregaPorBase.setOptions(options);
    }
    

这是我们现在拥有的图像，那些小滚动指针不起作用。

Answer 1

这是我一直在寻找的答案。模型的宽度不应使用 % 指定，并且父 div 的样式应使用“overflow-x: auto;”。

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