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'），但这不起作用。

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

Answer 1

您已将点击事件与情节联系起来。所以你不必再使用plot.series [seriesIndex] [“label”]。而只是使用series [seriesIndex] [“label”]。

这将为您提供所需的标签值。

Answer 2

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

如果数据如下所示 var seriesData = [{label：“XYZ”}，{label：“ABC”}];

以下代码为您提供标签 seriesData [seriesIndex] [“label”] 或 seriesData [seriesIndex] .label

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

Answer 3

也许您可以像primefaces show case

中所描述的那样尝试<p:ajax/>

您的代码可能如下所示：

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

在Backing 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;
}

Answer 4

不确定这是否有任何帮助我在折线图上的一个点上有类似的问题并且想要读取轴的标签。

{{1}}

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

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

4 个答案: