如何使用Primefaces jQplot实现禁用单个系列上的堆叠

I am using Primefaces 6 for my companys charting needs, which relies on jQplot. For a project, I am trying to overlay a line chart on a stacked bar chart with negative values, to obtain something like this:

我使用Primefaces 6来满足我公司的图表需求,这依赖于jQplot。对于一个项目,我试图在带有负值的堆积条形图上叠加折线图,以获得如下内容:

The problem is that when I try to add a linechartseries to the same model as the two barchartseries , the linechart becomes a part of the stack when setting setStacked(true); on the model, because Primefaces seems to not allow individual disabling of stacking on series, only per model. So I end up with this when rendering the chart with

问题是当我尝试将线图系列添加到与两个条形图系列相同的模型时,线图在设置setStacked(true)时成为堆栈的一部分;在模型上,因为Primefaces似乎不允许单独禁用系列上的堆叠,仅适用于每个型号。所以当渲染图表时我最终得到了这个

<p:chart type="bar" model="#{backingBean.cartesianChartModel}"/>

After some investigation I have notoced that jQplot is capable of disabling Stacking on individual series by passing disableStack : true in the JS options, so the question is if it's posssible to override this in some way on the rendered page,either via PF or via some JS hack? I feel that using the extender only apples to the entire model?

经过一些调查后,我发现jQplot能够通过在JS选项中传递disableStack:true来禁用单个系列上的Stacking,所以问题是,是否可以通过PF或某些方式在渲染页面上以某种方式覆盖它JS黑客?我觉得使用扩展器只对整个模型使用苹果?

Related issues: Disable individual stacking

2 个解决方案

#1

By pouring through the documentation I found a solution to the problem, if not the question:

通过阅读文档,我找到了问题的解决方案,如果不是问题:

It seems that Primefaces allows for individual series to be excempt from the stack in the series creation in this version, by passing

似乎Primefaces允许单个系列在此版本的系列创建中通过传递而不受堆栈的影响

LineChartSeries.setDisableStack(true);

Simple as that.

就那么简单。

#2

I guess it may be possible. I used the extender functionality for some jqPlot hacks in the past.

我想这可能是可能的。我过去曾使用扩展器功能来处理一些jqPlot黑客攻击。

In my case, for example, I had a Donut Chart defined with an extender function as follows:

例如,在我的情况下,我使用扩展函数定义了一个圆环图,如下所示:

    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");
    }

The corresponding javascript was doing some changes to the jqPlot:

相应的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"
   };
}

So you may try something like this in your case ? Leave the extension configuration of your series empty, except for the one you are interested in...

所以你可以尝试这样的事情吗?保留系列的扩展配置为空,除了您感兴趣的那个...

function chartExtender() {
   this.cfg.series = [
   { //...
   },
   { // ...
   },
   {
      disableStack: true          
   }
   ]
}

Worth having a shot ...

值得一试......

#1