Question

我正在尝试使用Google图表工具绘制图表。我想知道是否有一种方法可以使用Javascript从我的后备bean中获取数组值。我有以下代码，但是，当我对其进行测试时，它似乎没有获得支持bean：

我的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可以在primefaces中使用google图表，但是我想使用纯google图表api。

Answer 1

关于“ ..看起来好像没有得到支持bean”的查询

您正在使用#{chartBean.countries}，并且您的Managed Bean名称为ChartBeean。

您需要使用#{chartBeean.countries}和"#{chartBeean.numbers}"

图表工作代码-

您不需要在“上”“
dataTable：[＃{chartBeean.countriesString}，＃{chartBeean.numbersString}]）
我在国家/地区的字符串中添加了'。

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

}

使用Google图表工具从支持bean构建图表

1 个答案: