PrimeFaces饼图宽度总是100%

Question

PrimeFaces饼状图宽度总是100%。样式被忽略。

<p:pieChart model="#{bean.pieModel}"
style="width:200px;height:200px" >

版本11.0.0

Answer 1

我觉得应该怪chart.js。样式是由组件呈现的，但似乎是chart.js改变了它。你可能想把它包装在一个容器中，然后设置容器的高度。所以:

<div style="width:200px;height:200px">
<p:pieChart model="#{bean.pieModel}"/>
</div>

Answer 2

目前，这个修复似乎是有效的。我们已经在Java中设置了一个名为customExtender的扩展器，因此在XHTML文件中有一个JavaScript函数customExtender():

function customExtender() {
// old stuff
...
// 1. moved legend from Java to JavaScript, because position was wrong
this.cfg.config.options = {
plugins: {
legend: {
display: true,
position: 'right'
}
},
// 2. DON'T make the aspect ratio 1:1
maintainAspectRatio: false
}
// 3. force canvas height and width
let canvas= document.getElementsByTagName("canvas")[0];
canvas.parentNode.style.height = '250px';
canvas.parentNode.style.width = '615px';
};

将options中的maintainAspectRatio选项设置为FALSE，参考注释号。2.并强制画布父节点所需的style(宽度，高度)，见注释no。3.我从这里得到了这个想法https://stackoverflow.com/a/68276144/1145727。

图例不知何故移到了顶部，看起来Java部分创建和添加图例不再工作了。所以我把它移到了JavaScript，见注释1。1 .

图例对较长的图例文本没有换行。对我来说还可以，7个文本中只有一个稍微太长。