PrimeFaces水平条形图:移除多余区域与缩短轴边距问题
解决PrimeFaces p:barChart的两个布局需求
需求1:完全移除黄框标注区域(Y轴刻度/标签区域)
黄框对应Y轴的刻度与标签区域,要彻底移除,需单独配置Y轴并关闭其显示及刻度:
- 拆分原代码中X轴与Y轴的共用配置,分别定义X、Y轴的独立配置
- 对Y轴设置
setDisplay(false)关闭整体显示,同时配置ticks.setDisplay(false)确保刻度完全隐藏
修改后的核心配置代码:
// X轴配置(保留堆叠、网格线隐藏等原有设置) CartesianLinearAxes xAxes = new CartesianLinearAxes(); xAxes.setStacked(true); xAxes.setGridLines(gridLines); xAxes.setScaleLabel(label); // Y轴配置(完全隐藏) CartesianLinearAxes yAxes = new CartesianLinearAxes(); yAxes.setStacked(true); yAxes.setGridLines(gridLines); yAxes.setScaleLabel(label); yAxes.setDisplay(false); // 关闭Y轴整体显示 CartesianTicks yTicks = new CartesianTicks(); yTicks.setDisplay(false); // 关闭Y轴刻度 yAxes.setTicks(yTicks); // 将配置添加到刻度集 CartesianScales cScales = new CartesianScales(); cScales.addXAxesData(xAxes); cScales.addYAxesData(yAxes);
需求2:缩短绿箭头指示区域(图表左右内边距)
绿箭头对应图表左右两侧的空白区域,可通过调整布局内边距和X轴偏移来缩短:
- 添加
Layout配置,设置更小的左右内边距 - 关闭X轴的
offset属性,移除两端额外空白;同时减少X轴刻度的内边距
修改后的核心配置代码:
// 布局内边距配置 Layout layout = new Layout(); Padding padding = new Padding(); padding.setLeft(5); // 根据需求调整左侧内边距 padding.setRight(5); // 根据需求调整右侧内边距 layout.setPadding(padding); // X轴额外调整(减少刻度内边距+关闭偏移) CartesianTicks xTicks = new CartesianTicks(); xTicks.setPadding(2); xAxes.setTicks(xTicks); xAxes.setOffset(false); // 将布局配置加入图表选项 BarChartOptions options = new BarChartOptions(); options.setScales(cScales); options.setTooltip(tooltip); options.setOffsetGridLines(false); options.setLayout(layout);
修正后的完整Bean代码
private void chartSettings() { // 初始化图表模型与数据 stackedBarModel = new HorizontalBarChartModel(); ChartData data = new ChartData(); // 循环生成数据集(注意:将数据集对象创建移至循环内,避免数据覆盖) for (int i = 0; i < kko.getKazanclarList().size(); i++) { HorizontalBarChartDataSet barDataSet = new HorizontalBarChartDataSet(); int oran = (int) Math.floor(kko.getKazanclarList().get(i).getTutar() / kko.getKazancToplam() * 100); barDataSet.setLabel(kko.getKazanclarList().get(i).getMetinAlani() + " %" + oran); barDataSet.setBackgroundColor(rgbArray[i]); List<Number> dataVal = new ArrayList<Number>(); dataVal.add(kko.getKazanclarList().get(i).getTutar()); barDataSet.setData(dataVal); data.addChartDataSet(barDataSet); } stackedBarModel.setData(data); // 通用刻度标签与网格线配置 CartesianScaleLabel label = new CartesianScaleLabel(); label.setDisplay(false); AxesGridLines gridLines = new AxesGridLines(); gridLines.setDisplay(false); // X轴配置 CartesianLinearAxes xAxes = new CartesianLinearAxes(); xAxes.setStacked(true); xAxes.setGridLines(gridLines); xAxes.setScaleLabel(label); CartesianTicks xTicks = new CartesianTicks(); xTicks.setPadding(2); xAxes.setTicks(xTicks); xAxes.setOffset(false); // Y轴配置 CartesianLinearAxes yAxes = new CartesianLinearAxes(); yAxes.setStacked(true); yAxes.setGridLines(gridLines); yAxes.setScaleLabel(label); yAxes.setDisplay(false); CartesianTicks yTicks = new CartesianTicks(); yTicks.setDisplay(false); yAxes.setTicks(yTicks); CartesianScales cScales = new CartesianScales(); cScales.addXAxesData(xAxes); cScales.addYAxesData(yAxes); Tooltip tooltip = new Tooltip(); tooltip.setEnabled(false); // 布局内边距配置 Layout layout = new Layout(); Padding padding = new Padding(); padding.setLeft(5); padding.setRight(5); layout.setPadding(padding); BarChartOptions options = new BarChartOptions(); options.setScales(cScales); options.setTooltip(tooltip); options.setOffsetGridLines(false); options.setLayout(layout); stackedBarModel.setOptions(options); }
注:原代码中
barDataSet对象创建在循环外,会导致所有数据集引用同一个对象,最终仅显示最后一条数据,已修正为在循环内创建对象。
内容的提问来源于stack exchange,提问作者Cemal
相关产品推荐
相关产品推荐

