Столбчатая диаграмма jqplot: получить значение метки серии по клику

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> 

и это javascript(jquery), который я использую для события onclick:

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. И там сюжет назначается при создании графика. Я попытался присвоить plot для (document.getElementById('rrrr:qcontractoverview:endContractsChart'), но это не сработало.

Любые предложения или решения о том, как я могу достичь своей цели?

Answer 1

Вы уже связали событие клика с графиком. Итак, снова вам не нужно использовать plot.series[seriesIndex]["label"]. Вместо этого просто используйте series [seriesIndex] ["label"].

Это даст вам значение метки, которое вы ищете.

Answer 2

Не уверен, поможет ли это мне, у меня была похожая проблема с падением точки на линейном графике, и я хотел прочитать метку оси.

$('#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 в данных для доступа к метке серии.

Answer 3

Ох хорошо Это зависит от имени, которое вы использовали при передаче данных на график.

Если данные как ниже
var seriesData =[{label:"XYZ"},{label:"ABC"}];

Приведенный ниже код возвращает меткуseriesData[seriesIndex]["label"] или seriesData[seriesIndex].label

Так что просто проверьте имя переменной в данных и используйте то же самое.

Answer 4

Может быть, вы можете попробовать <p:ajax/> like what described in primefaces show case

And your code may looks like:

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

And in the 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;
}