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

【问题标题】：How to disable Stacking on an individual series using Primefaces jQplot implementation如何使用 Primefaces jQplot 实现禁用单个系列的堆叠
【发布时间】：2017-02-09 07:16:43
【问题描述】：

我正在使用 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

【问题讨论】：

" 我觉得使用扩展器只适用于整个模型？" 试试……看例子……不要先下结论。

标签： javascript primefaces jqplot

【解决方案1】：

通过翻阅文档，我找到了问题的解决方案，如果不是问题的话：

似乎 Primefaces 允许单个系列在此版本中的系列创建中通过传递从堆栈中排除

LineChartSeries.setDisableStack(true);

就这么简单。

【讨论】：

【解决方案2】：

我想这是可能的。过去，我在一些 jqPlot hack 中使用了扩展器功能。

例如，在我的例子中，我有一个使用扩展函数定义的圆环图，如下所示：

    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          
   }
   ]
}

值得一试...

【讨论】：