PrimeFaces水平条形图不使用JavaScript能否显示点标签?
水平条形图显示Point Labels的非JS实现方案
PrimeFaces图表底层基于jqPlot/Charts.js封装,早期版本的Java端API确实仅对饼图、折线图等类型开放了setShowPointLabels配置,没有直接支持水平条形图的点标签配置,但有完全不需要手写自定义JS的实现方案,根据你使用的PrimeFaces版本选择即可:
方案1:PrimeFaces 11及以上版本(纯Java端配置,无任何JS)
11+版本已经直接开放了条形图数据标签的配置API,直接调用对应方法即可:
// 初始化水平条形图模型 BarChartModel horizontalBarModel = new BarChartModel(); horizontalBarModel.setHorizontal(true); // 配置数据系列 BarChartSeries dataSeries = new BarChartSeries(); dataSeries.setLabel("统计项"); dataSeries.put("类别A", 156); dataSeries.put("类别B", 122); dataSeries.put("类别C", 98); // 开启该系列的数据标签显示 dataSeries.setShowDataLabels(true); horizontalBarModel.addSeries(dataSeries); // 配置标签显示在条形末端,水平条形图建议设为end horizontalBarModel.setDataLabelPosition("end"); // 可选:配置标签格式、字号、颜色等样式 horizontalBarModel.setDataLabelFormat("%d"); horizontalBarModel.setDataLabelFontSize("12px");
前端页面正常使用<p:barChart>组件绑定模型即可,不需要添加任何额外JS代码。
方案2:PrimeFaces 10及以下版本(无自定义JS逻辑,仅配置扩展属性)
低版本没有开放直接的配置API,可以通过模型的extender属性注入内置配置,不需要单独维护JS文件:
horizontalBarModel.setExtender( "function() { this.cfg.seriesDefaults.pointLabels = { show: true, location: 'e', edgeTolerance: -15 }; }" );
仅需要加这一行配置即可生效,不需要额外写JS逻辑。
如果是PrimeFaces 8及更早的远古版本,不支持上述两种配置方式,才需要单独编写自定义JS调用jqPlot的pointLabels接口实现需求。
内容的提问来源于stack exchange,提问作者Pratik
相关产品推荐
相关产品推荐

