5

arraylist を managedBean から JavaScript コードに送信したいのですが、

私の豆はここにあります：

public void getDataAsJson(){
    String [] dizi={"Tokyo","Jakarta","New York","Seoul",
              "Manila","Mumbai","Sao Paulo","Mexico City",
              "Dehli","Osaka","Cairo","Kolkata",
              "Los Angeles","Shanghai","Moscow","Beijing",
              "Buenos Aires","Guangzhou","Shenzhen","Istanbul"};

    Random rnd =new Random();

    JSONObject obj= new JSONObject();
    for (int i = 0; i < dizi.length; i++) 
        obj.put(dizi[i], new Integer(rnd.nextInt(80)));
}

私のjavascriptコードはxhtmlページにあります:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
<!--

$(function () {

    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                zoomType: 'xy'
            },
            title: {
                text: 'avarage'
            },
            subtitle: {
                text: ''
            },
            xAxis: [{
                gridLineWidth: 0.5,
                categories: [// here is my city names which come from mybean]
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    formatter: function() {
                        return this.value;
                    },
                    style: {
                        color: '#89A54E'
                    }
                },
                title: {
                    text: 'avarage',
                    style: {
                        color: '#89A54E'
                    }
                }
            }],

            series: [{
                name: 'avarage',
                color: '#89A54E',
                type: 'spline',
                data: [// // here is my city's avarage which come from mybean],
                       labels: {
                        rotation: -90,
                        align: 'right',
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
            }]
        });
    });
});
//-->
</script>

ここにxhtmlページの私の体があります:

<body>   
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
4

2 に答える 2

11

この質問のコンテキストでは、JSF は単なる HTML/JS コード ジェネレーターであることを理解する必要があります。

構文的に有効な JS コードになるような方法で、JSF に必要なデータを出力させるだけです。

categories: #{bean.dataAsJson}

ここで、目的の JSON コードを表す をgetDataAsJson()返します。String例えば基本的に：

public String getDataAsJson() {
    return "['foo', 'bar', 'baz']";
}

結果を確認するには、ブラウザでページを右クリックし、[ソースを表示]を実行します。

categories: ['foo', 'bar', 'baz']
于 2013-03-18T14:30:45.340 に答える
-1

JSF Beanを介してJavaScriptルーチンにデータを送信するのは良い考えではありませんが、私のソリューションはJava WebサービスまたはJAX-RSで動作しています。Java Web サービスには、JaxRsActivator とリソース クラスの 2 つのクラスが含まれています。JaxRsActivator のソース コードは次のとおりです。

package service;

import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;

@ApplicationPath("/rest")
public class JaxRsActivator extends Application {
}

リソースクラスのソースコードです。

package service;

import static javax.ws.rs.core.MediaType.TEXT_PLAIN;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;

@Path("/resource")
@Produces(TEXT_PLAIN)
public class resource {

@GET
@Path("cities")
public String dizi() {
    String s = "{\"Tokyo\",\"Jakarta\",\"New York\",\"Seoul\",\r\n" + 
            "\"Manila\",\"Mumbai\",\"Sao Paulo\",\"Mexico City\",\r\n" + 
            "\"Dehli\",\"Osaka\",\"Cairo\",\"Kolkata\",\r\n" + 
            "\"Los Angeles\",\"Shanghai\",\"Moscow\",\"Beijing\",\r\n" + 
            "\"Buenos Aires\",\"Guangzhou\",\"Shenzhen\",\"Istanbul\"};\r\n";
    return s;
}

}

ここで、JavaScript を変更します。チャートを生成するための無名関数を名前付き関数にします。

$(function () {
    var xhr = new XMLHttpRequest();
    // replace the dots
    var url = "http://localhost:8080/........../resource/cities";           

    xhr.onreadystatechange = function() {
    // Check if fetch request is done
     if (xhr.readyState == 4 && xhr.status == 200) { 
        console.log(xhr.responseText);
        // Parse the JSON string
        var jsonData = eval(xhr.responseText);
        generateChart(jsonData);
        }
    };

    // Do the HTTP call using the url variable we specified above
    xhr.open("GET", url, true);
    xhr.send();

function generateChart(CityData) {
    // put your code for generating your chart
    // modify line
    data: CityData
}

// JavaScript の終わり

この JavaScript も JSF ページの最後に配置します。ページの読み込み後、データの読み込みで JavaScript を開始し、データの読み込み後にグラフの生成を開始します。

成功します。

于 2019-05-04T16:13:22.840 に答える