我在上次更新中将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");
1条答案
按热度按时间wbgh16ku1#
好吧,问题是你把两个轴都设置为
stacked:true
,这将迫使ChartsJS把值“相加”在一起。要让它们“重叠”,你需要把Y轴设置为stacked:false
,就像这样。