Динамически отображать метки оси X в подсказке p: chart (bar) - PullRequest
Новая
       29

Динамически отображать метки оси X в подсказке p: chart (bar)

0 голосов
/ 14 сентября 2018

Используя PrimeFaces p:chart, возможно ли динамически отображать метки оси X в подсказке данных гистограммы вместо «индекса» в серии?

Например, если у меня есть следующий код: 

<h:body>                                 
   <p:chart type="bar" model="#{barChartDatatipView.barChartModel}" />                                                                        
</h:body>

И 

@ManagedBean
@ViewScoped
public class BarChartDatatipView {

  public BarChartModel getBarChartModel() {

    BarChartModel model = new BarChartModel();
    ChartSeries chartSeries = new BarChartSeries();
    chartSeries.set("car", 1222);
    chartSeries.set("bus", 3323); 
    model.addSeries(chartSeries);
    return model;
  }
}

Появится подсказка данных (1,1222) и (2,3323).Могу ли я показать их как (автомобиль, 1222) и (автобус, 3323)?Кроме того, я хотел бы, чтобы они были динамически обновлены с моделью бара.то есть, если добавляется другая точка, например chartSeries.set ("train", 4455), подсказка данных также должна быть соответствующим образом обновлена.

Я использую Java 8, JSF2.2 и Primefaces 6.2.

1 Ответ

0 голосов
/ 20 сентября 2018

Потратив много времени на изучение структуры jqplot, я наконец-то нашел ответ:

Java-код: 

@ManagedBean
@ViewScoped
public class BarChartDatatipView {

  public BarChartModel getBarChartModel() {

    BarChartModel model = new BarChartModel();
    ChartSeries chartSeries = new BarChartSeries();
    chartSeries.set("car", 1222);
    chartSeries.set("bus", 3323); 
    model.addSeries(chartSeries);
    model.setDatatipEditor("tooltipContentEditor");  // Set the editor.
    return model;
  }
}

HTML-страница: 

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui">

  <h:head>
    <title>Bar Chart - datatip</title>
    <h:outputScript name="js/barchart-datatip.js" />   
  </h:head>
  <h:body>                                                 
    <p:chart type="bar" model="#{barChartDatatipView.barChartModel}" />                                                                        
  </h:body>
</html>

и функция JavaScript: 

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    return plot.axes.xaxis.ticks[pointIndex] + ", " + plot.data[seriesIndex][pointIndex];
}
...