2012-03-05 9 views
1

@BalusCのアドバイスhereに従っています。 (これは以前の質問とは関係ないのでここに書いています)JavascriptとJSFでデータベースをどのように使用しますか?

私は自分のデータベースからデータを取得し、JavaScriptを使用してチャートで表示する必要があります。this is an example 私はこのサンプルを実行しているので、サーバー側からクライアント側にデータを表示する方法を理解できます。

マイ豆:

@ManagedBean(name="reportc") 
@ViewScoped 
public class ReportControl implements Serializable { 
    private static final long serialVersionUID = 3269125738504434502L; 

    private String[] dataAsJson = {"1.3", "2.1", "1.3", "2.2", "1.4", "2.7", "1.5", "2.1", "1.6", "2.4", "1.9", "2.1"}; 

    public String getDataAsJson() { 
     Gson gson = new Gson(); 
     return gson.toJson(dataAsJson); 
    } 
} 

spline-plot-bands.jsファイルを理解するために。

<!DOCTYPE html> 
<html lang="en" 
    xmlns="http://www.w3.org/1999/xhtml" 
    ... 

    <h:head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

     <h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript> 
     <h:outputScript name="javascript/highchart/spline-plot-bands.js" /> 
    </h:head> 
    <h:body> 

    <h:outputScript name="javascript/highchart/highcharts.js" /> 
    <h:outputScript name="javascript/highchart/modules/exporting.js" /> 

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 

    </h:body> 
</html> 

spline-plot-bands.jsファイルのとおりです。私は、サーバー側からこのJavaScriptにこのようなものを送ることができる方法

series: [{ 
    name: 'Hestavollane', 
    data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1, 
     7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4, 
     8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5, 
     7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2, 
     3.0, 3.0] 

    }, { 
    name: 'Voll', 
    data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0, 
     0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 
     0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3, 
     3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4] 
    }] 

私にとって重要なのは、この部分(私は推測)ですか?

gson、jsfでjavascriptを使用する方法を知りたいと思っていますが、これをどのように終了するかはまだ分かりません。 誰かが私にこれを手伝ってもらえますか?

答えて

1

JSはdouble[]を期待していますが、String[]を供給しています。それに応じて修正:

private double[] hestavollane = { 
    4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1, 
    7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4, 
    8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5, 
    7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2, 
    3.0, 3.0 
}; 

private double[] voll = { 
    0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0, 
    0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 
    0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3, 
    3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4 
}; 

public String getDataAsJson() { 
    Map<String, Object> data = new HashMap<String, Object>(); 
    data.put("hestavollane", hestavollane); 
    data.put("voll", voll); 
    return new Gson().toJson(data); 
} 

そしてハードコードされた値の代わりにそれを使用するようにspline-plot-bands.jsファイルを編集します。

series: [{ 
    name: 'Hestavollane', 
    data: data.hestavollane 
}, { 
    name: 'Voll', 
    data: data.voll 
}] 
+0

WOWを! 驚くばかりのBauke、とても助けてくれてありがとう、私の友人。 それは動作します!おかげさまで –

+0

ようこそ。 – BalusC

1

あなたが必要とするリンク先の記事の重要な部分はこれです:

<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript> 
関連する問題