更新版本Chart.js 2.9.4 -> Chart.js 3.5.0后的->组条模型
更新版本Chart.js 2.9.4 -> Chart.js 3.5.0后的->组条模型
提问于 2022-05-27 18:02:05
我将Primefaces与Chart.js一起使用，在最后一次更新中，它们从Chart.js 2.9.4迁移到Chart.js 3.5.0
这样，我所使用的图形模型就没有被配置，请看之前和之后的两个小视频。
看看我的图表是怎样的，并在更新它的错误之后
在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");
回答 1
Stack Overflow用户
发布于 2022-05-28 13:06:15
问题是，您正在将两个轴都设置为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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72409425
复制相关文章
相似问题
腾讯云开发者
