图表.js更新版本后的堆叠组栏模型 图表.js 2.9.4 -> 图表.js 3.5.0

问：

我在上次更新中将Primefaces与Chart.js一起使用，他们从Chart.js 2.9.4迁移到Chart.js 3.5.0

这样一来，我使用的图形模型就没有配置了，看前后的2个小视频。

看看我的图表是怎样的，更新后是错误

https://www.loom.com/share/ca3919221a154f0d9cf9bbe41843cf2b 之前

https://www.loom.com/share/e9c0ac3e7df942a7aac74a19deb49c6a 后

如果您愿意，在Primefaces论坛中，我打开了一个电话，并在其中展示了一个代码示例。

https://forum.primefaces.org/viewtopic.php?f=98&t=72619

    public void criarGraficoFluxoCaixaMensal() {
            barContasReceberPagarAnual = new BarChartModel();
            ChartData data = new ChartData();
    
            LineChartDataSet dataBalancoPrevisto = new LineChartDataSet();
            List<Object> balancoPrevisto = new ArrayList<Object>();
            LineChartDataSet dataBalancoRealizado = new LineChartDataSet();
            List<Object> balancoRealizado = new ArrayList<Object>();
    
            BarChartDataSet barDataReceitaPrevista = new BarChartDataSet();
            barDataReceitaPrevista.setLabel("Recebimentos previstos");
            barDataReceitaPrevista.setBackgroundColor("rgba(102, 187, 106, 0.3)");
            barDataReceitaPrevista.setBorderColor("rgb(102, 187, 106)");
            barDataReceitaPrevista.setStack("principal");
            List<Number> listaContasReceberPrevisto = new ArrayList<Number>();
            List<Object[]> resultReceita = dao.buscarTotalContasReceberAnualPrevisto();
            for (int i = 1; i <= 12; i++) {
             listaContasReceberPrevisto.add(0.0);
                balancoPrevisto.add(0.0);
                balancoRealizado.add(0.0);
    
            }
            for (Object[] result : resultReceita) {
                listaContasReceberPrevisto.add(((int) result[0] - 1), (Number) result[1]);
    
            }
            barDataReceitaPrevista.setData(listaContasReceberPrevisto);
    
            BarChartDataSet barDataDespesaPrevista = new BarChartDataSet();
            barDataDespesaPrevista.setLabel("Pagamentos previstos");
            barDataDespesaPrevista.setBackgroundColor("rgba(239, 83, 80, 0.3)");
            barDataDespesaPrevista.setBorderColor("rgb(239, 83, 80)");
            barDataDespesaPrevista.setStack("principal");
            List<Number> listaContasPagarPrevisto = new ArrayList<Number>();
            List<Object[]> resultsDespesa = dao.buscarTotalContasPagarAnualPrevisto();
    
            for (int i = 1; i <= 12; i++) {
                listaContasPagarPrevisto.add(0.0);
    
            }
            Number in;
            for (Object[] result : resultsDespesa) {
                in = (Number) result[1];
                listaContasPagarPrevisto.add(((int) result[0] - 1), -in.intValue());
    
            }
            barDataDespesaPrevista.setData(listaContasPagarPrevisto);
    
            BarChartDataSet barDataDespesaRealizada = new BarChartDataSet();
            barDataDespesaRealizada.setLabel("Pagamentos realizados");
            barDataDespesaRealizada.setBackgroundColor("rgba(239, 83, 80, 0.6)");
            barDataDespesaRealizada.setBorderColor("rgb(239, 83, 80)");
            barDataDespesaRealizada.setStack("principal");
            List<Number> listaContasPagarRealizada = new ArrayList<Number>();
            List<Object[]> resultsDespesaRealizada = dao.buscarTotalContasPagarAnual();
    
            for (int i = 1; i <= 12; i++) {
                listaContasPagarRealizada.add(0.0);
    
            }
            for (Object[] result : resultsDespesaRealizada) {
                in = (Number) result[1];
                listaContasPagarRealizada.add(((int) result[0] - 1), -in.intValue());
    
            }
            barDataDespesaRealizada.setData(listaContasPagarRealizada);
    
            BarChartDataSet barDataReceitaRealizada = new BarChartDataSet();
            barDataReceitaRealizada.setLabel("Recebimentos realizados");
            barDataReceitaRealizada.setBackgroundColor("rgba(102, 187, 106, 0.6)");
            barDataReceitaRealizada.setBorderColor("rgb(102, 187, 106)");
            barDataReceitaRealizada.setStack("principal");
            List<Number> listaContasReceberRealizada = new ArrayList<Number>();
            List<Object[]> resultsReceberRealizada = dao.buscarTotalContasReceberAnual();
    
            for (int i = 1; i <= 12; i++) {
                listaContasReceberRealizada.add(0.0);
    
            }
            for (Object[] result : resultsReceberRealizada) {
                listaContasReceberRealizada.add(((int) result[0] - 1), (Number) result[1]);
    
            }
            barDataReceitaRealizada.setData(listaContasReceberRealizada);
    
            for (int i = 0; i < 12; i++) {
                try {
                    balancoPrevisto.add(i, listaContasReceberPrevisto.get(i).intValue() - (Math.abs(listaContasPagarPrevisto.get(i).intValue())));
    
                    balancoRealizado.add(i, (listaContasReceberRealizada.get(i).intValue() - (Math.abs(listaContasPagarRealizada.get(i).intValue()))));
                } catch (Exception ex) {
                    balancoPrevisto.add(i, 0);
                    balancoRealizado.add(i, 0);
                }
    
            }
            dataBalancoPrevisto.setData(balancoPrevisto);
            dataBalancoPrevisto.setFill(false);
            dataBalancoPrevisto.setLabel("Saldo previsto");
            dataBalancoPrevisto.setBackgroundColor("rgba(66, 165, 245, 0.3)");
            dataBalancoPrevisto.setBorderColor("rgba(66, 165, 245, 0.3)");
            dataBalancoPrevisto.setTension(0.1);
            dataBalancoRealizado.setData(balancoRealizado);
            dataBalancoRealizado.setFill(false);
            dataBalancoRealizado.setLabel("Saldo realizado");
            dataBalancoRealizado.setBackgroundColor("rgba(66, 165, 245, 0.6)");
            dataBalancoRealizado.setBorderColor("rgb(66, 165, 245)");
            dataBalancoRealizado.setTension(0.1);
            data.addChartDataSet(dataBalancoPrevisto);
            data.addChartDataSet(dataBalancoRealizado);
            data.addChartDataSet(barDataDespesaPrevista);
            data.addChartDataSet(barDataDespesaRealizada);
            data.addChartDataSet(barDataReceitaPrevista);
            data.addChartDataSet(barDataReceitaRealizada);
    
            List<String> labels = new ArrayList<>();
            labels.add("Janeiro");
            labels.add("Fevereiro");
            labels.add("Março");
            labels.add("Abril");
            labels.add("Maio");
            labels.add("Junho");
            labels.add("Julho");
            labels.add("Agosto");
            labels.add("Setembro");
            labels.add("Outubro");
            labels.add("Novembro");
            labels.add("Dezembro");
            data.setLabels(labels);
            barContasReceberPagarAnual.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("Bar Chart - Stacked");
            options.setTitle(title);
    
            Tooltip tooltip = new Tooltip();
            tooltip.setMode("index");
            tooltip.setIntersect(false);
            options.setTooltip(tooltip);*/
            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);
    
            Tooltip tooltip = new Tooltip();
            tooltip.setMode("index");
            tooltip.setDisplayColors(true);
            tooltip.setIntersect(true);
            barContasReceberPagarAnual.setOptions(options);
            barContasReceberPagarAnual.setExtender("currencyBr");
        }

浅绿色是预测的，深绿色是已完成的，当预测条正在执行时，它被已完成的条隐藏。

看到现在所取得的成就与预期的没有重叠。

我尝试根据您的代码进行测试，但问题仍然存在。

问题在于从同一个地方开始的 4 根柱线的并集，我们想将 4 根柱线放在一个堆叠中。

看到如果我更改这两条线，条形图是并排的

 barDataReceitaPrevista.setStack("principal");
 barDataDespesaPrevista.setStack("principal");
 barDataReceitaRealizada.setStack("principal_1");
 barDataDespesaRealizada.setStack("principal_1");

当我试图让它们从同一个地方开始时，它看起来像这样

 barDataReceitaPrevista.setStack("principal");
 barDataDespesaPrevista.setStack("principal");
 barDataReceitaRealizada.setStack("principal");
 barDataDespesaRealizada.setStack("principal");