Chart.js 2.9.4 ->Chart.js 3.5.0版本更新后的Chart.js堆叠组条形图模型

n7taea2i  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(281)

我在上次更新中将Primeface与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个条放在一个单一的Stacked中。
如果我改变这两条线,这些条会并排

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");

wbgh16ku

wbgh16ku1#

好吧,问题是你把两个轴都设置为stacked:true,这将迫使ChartsJS把值“相加”在一起。要让它们“重叠”,你需要把Y轴设置为stacked:false,就像这样。

CartesianLinearAxes xAxes = new CartesianLinearAxes();
xAxes.setStacked(true);
cScales.addXAxesData(xAxes);

CartesianLinearAxes yAxes = new CartesianLinearAxes();
yAxes.setStacked(false);
cScales.addYAxesData(yAxes);

相关问题