jsf - jqplot条形图：onclick获取系列标签值

Question

我想在单击时显示条的标签。我有一个

这是jsf代码

<p:barChart id="endingContractsChart" value="#{portalContractLifeCycle.endingContractsChartModel}" 
        binding="#{portalContractLifeCycle.endingContractsBarChart}" extender="toInteger" 
        barMargin="3" min="0" max="5" yaxisFormat="%d" xaxisGrid="false" styleClass="kmstate mm-metergauge" animate="true"  >

</p:barChart>

这是我用于 onclick 事件的 javascript(jquery)：

var plot =$(document.getElementById('rrrr:qcontractoverview:endingContractsChart'));

 plot.bind('jqplotDataClick',
        function (ev, seriesIndex, pointIndex, data) {
document.getElementById('rrrr:qcontractoverview:pointIndex').value=pointIndex;
    $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+'x : '+plot.series[seriesIndex].data[pointIndex][0]+' Y: '+plot.series[seriesIndex]["label"] );
        }
      );

info3 是我显示值的范围（如http://www.jqplot.com/tests/bar-charts.php上的示例）

我用 plot.series[seriesIndex]["label"] 试过，但问题是情节是未定义的。

我在互联网上看到的所有示例都是在 javascript 中定义图表而不是在 jsf 中定义的。并且在创建图表时分配了情节。我尝试将绘图分配给 (document.getElementById('rrrr:qcontractoverview:endingContractsChart') 但这没有用。

关于如何实现目标的任何建议或解决方案？

score 1 · Accepted Answer

您已经将点击事件绑定到绘图。所以你不必再使用 plot.series[seriesIndex]["label"]。相反，只需使用 series[seriesIndex]["label"]。

这将为您提供您正在寻找的标签值。

score 0 · Accepted Answer

哦好的。这取决于您在将数据传递到图表时使用的名称。

如果数据如下
var seriesData =[{label:"XYZ"},{label:"ABC"}];

下面的代码为您提供标签 seriesData[seriesIndex]["label"]或seriesData[seriesIndex].label

因此，只需检查数据中 var 的名称，并使用相同的名称。

score 0 · Accepted Answer

也许您可以尝试<p:ajax/>像primefaces 展示案例中描述的那样

您的代码可能如下所示：

<p:barChart id="endingContractsChart" value="#{portalContractLifeCycle.endingContractsChartModel}" 
    binding="#{portalContractLifeCycle.endingContractsBarChart}" extender="toInteger" 
    barMargin="3" min="0" max="5" yaxisFormat="%d" xaxisGrid="false" styleClass="kmstate mm-metergauge" animate="true"  >
<p:ajax event="itemSelect" listener="#{portalContractLifeCycle.itemSelect}" update="info3" />
</p:barChart>

在支持 Bean 中：

private String info;

public void itemSelect(ItemSelectEvent event) {  
info="series: "+ event.getSeriesIndex() +", point: "+event.getItemIndex();
}  //You may gain data with the series and point 

public String getInfo(){
return info;
}

score 0 · Accepted Answer

不确定这是否有任何帮助我在折线图上的点下降时遇到了类似的问题，并想阅读轴的标签。

$('#chartdiv').bind("jqplotClick", function(ev, seriesIndex, pointIndex, data, plot) {

    console.log('Plot Index: '+data.data[0]);
    console.log('Plot Value: '+data.data[1]);  
    console.log('Plot Label: '+plot.series[data.seriesIndex].label);
});

回调中有一个额外的参数，它从那里引用整个图，您可以使用数据中的 plotIndex 来访问系列标签。

jsf - jqplot条形图：onclick获取系列标签值

4 回答 4

Related

Reference