Verbinden von Graphiken mit Java ServerFaces

Question

Ich versuche, Grafiken mit Echarts in einer ServerFaces-Anwendung zu erstellen.

Wie kann ich un JSON von der verwalteten Bean an die Javascript-Grafik senden?

Answer 1

Sie können den JSON in JSF erstellen und die erforderlichen Parameter an eine JavaScript-Funktion übergeben, die das Diagramm rendert. RemoteConmand zu rnder Chart-Funktion aufrufen:

<p:remoteCommand name="rc" autoRun="true" 
           oncomplete="renderChart('${disponibilidadController.titulo}', 
           '${disponibilidadController.chartDataTic}', 
           '${disponibilidadController.chartDataComp}', 
           '${disponibilidadController.chartDataImpr}', 
           '${disponibilidadController.chartDataComu}', 
           '${disponibilidadController.chartSerie}', 
           '${disponibilidadController.miny}');"/> 

JavaScript-Code für Echart:

<script type="text/javascript"> 
      // based on prepared DOM, initialize echarts instance 
      function renderChart(titulo, dataYTic, dataYComp, dataYImpr, dataYComu, dataX, minY) { 
       myChart = echarts.init(document.getElementById('myChartC')); 
       var option = { 
        title: { 
         text: titulo 
        }, 
        color: ['#5793f3', '#d14a61', '#675bba', '#107533'], 
        tooltip: { 
         trigger: 'axis', 
         axisPointer: { 
          type: 'shadow' 
         } 
        }, 
        grid: { 
         left: '3%', 
         right: '4%', 
         bottom: '3%', 
         containLabel: true 
        }, 
        legend: { 
         data: ['Disponibilidad'] 
        }, 
        xAxis: [ 
         { 
          type: 'category', 
          axisTick: { 
           alignWithLabel: true 
          }, 
          data: $.parseJSON(dataX) 
         } 
        ], 
        yAxis: [ 
         {type: 'value', 
          min: minY, 
          max: 100, 
          axisLabel: { 
           formatter: function (val) { 
            return val + '%'; 
           } 
          } 
         } 
        ], 
        series: [{ 
          name: ' TICS', 
          type: 'line', 
          barWidth: '70%', 
          data: $.parseJSON(dataYTic) 

         }, 
         { 
          name: 'Computadoras', 
          type: 'line', 
          barWidth: '70%', 
          data: $.parseJSON(dataYComp) 

         }, 
         { 
          name: 'Impresoras', 
          type: 'line', 
          barWidth: '70%', 
          data: $.parseJSON(dataYImpr) 

         }, 
         { 
          name: 'Comunicaciones', 
          type: 'line', 
          barWidth: '70%', 
          data: $.parseJSON(dataYComu) 

         }] 

       }; 

       // use configuration item and data specified to show chart 
       myChart.setOption(option); 


      } 

      window.onresize = function() { 
       myChart.resize(); 
      }; 

     </script> 

BackingBean:

private String titulo; 
private String dataY; 
private String chartDataTic; 
private String chartDataComp; 
private String chartDataImpr; 
private String chartDataComu; 
private BigDecimal miny; 

public void initChart() throws Exception { 

titulo = "My Chart Title"; 
dataY = "5, 20, 36, 10, 10, 20"; 
this.miny = new BigDecimal(100); 

List<BigDecimal> listaValoresTic = new ArrayList<>(); 
List<BigDecimal> listaValoresComp = new ArrayList<>(); 
List<BigDecimal> listaValoresImpr = new ArrayList<>(); 
List<BigDecimal> listaValoresComu = new ArrayList<>(); 

List<String> listaX = new ArrayList<>(); 

try { 
    List<DisponibilidadHistorico> dhs = this.eJBController.getDisponibilidadEJB().disponibilidadHistPorSemanas(8); 
    for (int i = 0; i < dhs.size(); i++) { 
     DisponibilidadHistorico get = dhs.get(i); 
     listaValoresTic.add(get.getDispTics()); 
     listaValoresComp.add(get.getDispComp()); 
     listaValoresImpr.add(get.getDispImpr()); 
     listaValoresComu.add(get.getDispComu()); 

     listaX.add(utilMB.toStringfechaDatosSemana(get.getFecha())); 
     if (this.miny.compareTo(get.getDispComp()) == 1) { 
      this.miny = get.getDispComp(); 
     } 
     if (this.miny.compareTo(get.getDispComp()) == 1) { 
      this.miny = get.getDispComp(); 
     } 
     if (this.miny.compareTo(get.getDispImpr()) == 1) { 
      this.miny = get.getDispImpr(); 
     } 
     if (this.miny.compareTo(get.getDispComu()) == 1) { 
      this.miny = get.getDispComu(); 
     } 

    } 

    setChartDataTic(new Gson().toJson(listaValoresTic)); 
    setChartDataComp(new Gson().toJson(listaValoresComp)); 
    setChartDataImpr(new Gson().toJson(listaValoresImpr)); 
    setChartDataComu(new Gson().toJson(listaValoresComu)); 
    setChartSerie(new Gson().toJson(listaX)); 
} catch (Exception e) { 
}