如何隐藏PrimeFaces LineChartModel的蓝色按钮及“My First Dataset”标签
如何隐藏PrimeFaces LineChartModel中的图例(蓝色按钮及"My First Dataset"标签)
我需要解决的问题是:隐藏PrimeFaces LineChartModel中的蓝色按钮及其标签“My First Dataset”。查阅PrimeFaces官方v8展示文档后未找到解决方案,以下是我的后台Bean方法代码和XHTML代码,恳请帮助:
后台Bean方法代码
public void createComparativoDiaAnteriorLinhas() { this.lineModel = new LineChartModel(); ChartData data = new ChartData(); LineChartDataSet dataSet = new LineChartDataSet(); List<Number> values = new ArrayList<>(); values.add(65); values.add(59); values.add(80); values.add(81); values.add(56); values.add(55); values.add(40); dataSet.setData(values); dataSet.setFill(false); dataSet.setLabel("My First Dataset"); dataSet.setBorderColor("rgb(75, 192, 192)"); dataSet.setLineTension(0.1); data.addChartDataSet(dataSet); List<String> labels = new ArrayList<>(); labels.add("January"); labels.add("February"); labels.add("March"); labels.add("April"); labels.add("May"); labels.add("June"); labels.add("July"); data.setLabels(labels); //Options LineChartOptions options = new LineChartOptions(); Title title = new Title(); title.setDisplay(true); title.setText("Line Chart"); options.setTitle(title); lineModel.setOptions(options); lineModel.setData(data); }
XHTML代码
<p:lineChart model="#{chartJsView.lineModel}" style="width: 100%; height: 500px;"/>
解决方案
PrimeFaces的LineChart基于Chart.js实现,要隐藏图例,只需在LineChartOptions中配置图例的显示属性为false:
在后台Bean代码的Options配置部分,添加图例隐藏逻辑,修改后的代码片段如下:
//Options LineChartOptions options = new LineChartOptions(); Title title = new Title(); title.setDisplay(true); title.setText("Line Chart"); options.setTitle(title); // 添加图例隐藏配置 Legend legend = new Legend(); legend.setDisplay(false); options.setLegend(legend); lineModel.setOptions(options); lineModel.setData(data);
配置完成后,图表右上角的图例(包括蓝色按钮和"My First Dataset"标签)会被彻底隐藏。
内容的提问来源于stack exchange,提问作者Dev_Edimar FUll stack
相关产品推荐
相关产品推荐

