如何使用 Primefaces jQplot 实现在单个系列上禁用堆叠
How to disable Stacking on an individual series using Primefaces jQplot implementation
我正在使用 Primefaces 6 来满足我公司的图表需求,它依赖于 jQplot。
对于一个项目,我试图在具有负值的堆叠条形图上叠加折线图,以获得如下内容:
问题是,当我尝试将 linechartseries
添加到与两个 barchartseries
相同的模型时,在设置 setStacked(true);
时折线图成为堆栈的一部分模型,因为 Primefaces 似乎不允许单独禁用系列堆叠,仅限每个模型。所以我在用
渲染图表时得到了这个
<p:chart type="bar" model="#{backingBean.cartesianChartModel}"/>
经过一些调查,我注意到 jQplot 能够通过在 JS 选项中传递 disableStack : true
来禁用单个系列的堆叠,所以问题是是否可以在呈现的页面上以某种方式覆盖它,通过 PF 还是通过一些 JS hack?我觉得使用扩展器只会影响整个模型?
相关问题:Disable individual stacking
通过查阅文档,我找到了问题的解决方案,如果不是问题:
似乎 Primefaces 允许通过传递
LineChartSeries.setDisableStack(true);
就这么简单。
我想这是可能的。我过去使用扩展器功能进行了一些 jqPlot 黑客攻击。
例如,在我的例子中,我有一个用扩展函数定义的圆环图,如下所示:
private void createDonutModel() {
donutModel = new DonutChartModel();
donutModel.setLegendPosition("s");
donutModel.setLegendPlacement(LegendPlacement.OUTSIDE);
donutModel.setSliceMargin(4);
donutModel.setDataFormat("value");
donutModel.setShadow(false);
donutModel.setExtender("donutExtender");
donutModel.setSeriesColors("B81C40, FFA600, 79B54A");
}
相应的 javascript 正在对 jqPlot 做一些更改:
/**
* Customized jqPlot JQuery layout of the Donut Chart for Status Dashboard.
*/
function donutExtender() {
this.cfg.seriesDefaults = {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
thickness: 26,
ringMargin: 0,
fill: true,
padding: 0,
sliceMargin: 4,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: false,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead, or 'percent'
dataLabels: 'value',
shadow: false
}
}
this.cfg.gridPadding = {
top: 0, right: 0, bottom: 0, left: 0
}
this.cfg.legend = {
show: false
}
this.cfg.grid = { drawBorder: false,
shadow: false,
background: "transparent"
};
}
所以你可以在你的情况下尝试这样的事情吗?
将你的系列的扩展配置留空,除了你感兴趣的那个...
function chartExtender() {
this.cfg.series = [
{ //...
},
{ // ...
},
{
disableStack: true
}
]
}
值得一试...
我正在使用 Primefaces 6 来满足我公司的图表需求,它依赖于 jQplot。 对于一个项目,我试图在具有负值的堆叠条形图上叠加折线图,以获得如下内容:
问题是,当我尝试将 linechartseries
添加到与两个 barchartseries
相同的模型时,在设置 setStacked(true);
时折线图成为堆栈的一部分模型,因为 Primefaces 似乎不允许单独禁用系列堆叠,仅限每个模型。所以我在用
<p:chart type="bar" model="#{backingBean.cartesianChartModel}"/>
经过一些调查,我注意到 jQplot 能够通过在 JS 选项中传递 disableStack : true
来禁用单个系列的堆叠,所以问题是是否可以在呈现的页面上以某种方式覆盖它,通过 PF 还是通过一些 JS hack?我觉得使用扩展器只会影响整个模型?
相关问题:Disable individual stacking
通过查阅文档,我找到了问题的解决方案,如果不是问题:
似乎 Primefaces 允许通过传递
LineChartSeries.setDisableStack(true);
就这么简单。
我想这是可能的。我过去使用扩展器功能进行了一些 jqPlot 黑客攻击。
例如,在我的例子中,我有一个用扩展函数定义的圆环图,如下所示:
private void createDonutModel() {
donutModel = new DonutChartModel();
donutModel.setLegendPosition("s");
donutModel.setLegendPlacement(LegendPlacement.OUTSIDE);
donutModel.setSliceMargin(4);
donutModel.setDataFormat("value");
donutModel.setShadow(false);
donutModel.setExtender("donutExtender");
donutModel.setSeriesColors("B81C40, FFA600, 79B54A");
}
相应的 javascript 正在对 jqPlot 做一些更改:
/**
* Customized jqPlot JQuery layout of the Donut Chart for Status Dashboard.
*/
function donutExtender() {
this.cfg.seriesDefaults = {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
thickness: 26,
ringMargin: 0,
fill: true,
padding: 0,
sliceMargin: 4,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: false,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead, or 'percent'
dataLabels: 'value',
shadow: false
}
}
this.cfg.gridPadding = {
top: 0, right: 0, bottom: 0, left: 0
}
this.cfg.legend = {
show: false
}
this.cfg.grid = { drawBorder: false,
shadow: false,
background: "transparent"
};
}
所以你可以在你的情况下尝试这样的事情吗? 将你的系列的扩展配置留空,除了你感兴趣的那个...
function chartExtender() {
this.cfg.series = [
{ //...
},
{ // ...
},
{
disableStack: true
}
]
}
值得一试...