построение диаграммы из базового компонента с помощью инструментов Google Chart - PullRequest
Новая
       6

построение диаграммы из базового компонента с помощью инструментов Google Chart

0 голосов
/ 25 июня 2018

Я пытаюсь нарисовать диаграмму, используя инструменты Google.Я хотел бы знать, есть ли способ получить значения массива из моего компонента, используя Javascript.У меня есть следующий код, но, когда я тестирую его, похоже, что он не получает компонент поддержки:

мой xhtml: 

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:composition template="/pages/menu.xhtml">
        <ui:define name="conteudo">
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <script type="text/javascript">

              // Load the Visualization API and the corechart package.
                google.charts.load('current');   // Don't need to specify chart libraries!

              // Set a callback to run when the Google Visualization API is loaded.
              google.charts.setOnLoadCallback(drawVisualization);

              function drawVisualization() {
                  var wrapper = new google.visualization.ChartWrapper({
                    chartType: 'ColumnChart',
                    dataTable: ["#{chartBean.countries}", "#{chartBean.numbers}"],
                    options: {'title': 'Countries'},
                    containerId: 'vis_div'
                  });
                  wrapper.draw();
                }
            </script>   
            <div id="vis_div" style="width: 600px; height: 400px;"></div>
        </ui:define>
    </ui:composition>
</html>

мой компонент поддержки: 

@ManagedBean  
@RequestScoped  
public class ChartBeean {

    private String[] countries = {"","Germany","USA","Brazil","Canada","France","Russia"};
    private int[] numbers = {0,700,300,400,500,600,800};


    public String[] getCountries() {
        return countries;
    }
    public void setCountries(String[] countries) {
        this.countries = countries;
    }
    public int[] getNumbers() {
        return numbers;
    }
    public void setNumbers(int[] numbers) {
        this.numbers = numbers;
    }
}

Кто-нибудь может мне помочь с этим?PS: я знаю, что есть определенные API для использования Google-карт в простом виде, но я хотел бы использовать чистый API-интерфейс Google.

1 Ответ

0 голосов
/ 25 июня 2018

для вашего запроса относительно "..это похоже, что он не получает компонент поддержки"

Вы используете #{chartBean.countries}, и ваше имя управляемого компонента ChartBeean.

Вам нужно использовать #{chartBeean.countries} и "#{chartBeean.numbers}"

Рабочий код для диаграмм -

  1. Вам не нужно "" на
    dataTable: [# {chartBeean.countriesString}, # {chartBeean.numbersString}])
  2. Я добавил 'в строке для стран.

XHTML 

<h:head>
    <title>Charts Test</title>

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        // Load the Visualization API and the corechart package.
        google.charts.load('current'); // Don't need to specify chart libraries!

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawVisualization);

        function drawVisualization() {
            var wrapper = new google.visualization.ChartWrapper(
                    {
                        chartType : 'ColumnChart',
                        dataTable : [ #{chartBeean.countriesString},
                                #{chartBeean.numbersString} ],
                        options : {
                            'title' : 'Countries'
                        },
                        containerId : 'chart_div'
                    });
            wrapper.draw();
        }
    </script>
</h:head>
<h:body>

    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>

</h:body>
</html>

ManagedBean 

package com;

import java.util.Arrays;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class ChartBeean {

    private String[] countries = { "'Germany'", "'USA'", "'Brazil'", "'Canada'", "'France'", "'Russia'" };
    private String[] numbers = { "700", "300", "400", "500", "600", "800" };

    public ChartBeean() {
        super();
        System.out.println("ChartBeean..");
    }

    @PostConstruct
    public void init() {
        System.out.println("ChartBeean init..");
    }

    public String getCountriesString() {

        // ['Germany', 'USA', 'Brazil', 'Canada', 'France', 'Russia']
        String deepToString = Arrays.deepToString(countries);
        System.out.println(deepToString);
        return deepToString;
    }

    public String getNumbersString() {
        // [700, 300, 400, 500, 600, 800]
        String deepToString = Arrays.deepToString(numbers);
        System.out.println(deepToString);
        return deepToString;
    }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...