0

JS、jQuery、JSONのことに関してはかなり新しいので、どんな助けでも大歓迎です。Highchartsで作業しようとしているプロジェクトがあります。それはJSF2.2、RichFaces 4です。データベースからデータをプルし、ストアをコレクションに入れるバッキングBeanをすでに持っています。次に、コレクションをGSON文字列に変換します。GSONオブジェクトのプリントアウトからのデータのサンプルは次のとおりです。

{"プール価格"：[{"date"： "Date.UTC（2012,5,4,1）"、 "data"： "1144.144"}、{"date"： "Date.UTC（2012,5、 4,2） "、" data "：" 1030.421 "}]、" RAPP "：[{" date "：" Date.UTC（2012,5,4,1） "、" data "：" 11.50 "}、 {"date"： "Date.UTC（2012,5,4,2）"、 "data"： "10.87"}]}

このページに関しては、HighChartsのサンプルページからJSFiddleでグラフをデザインし、ハードコードされた値を使用して見た目やデザインを正しくしました。

今の私の問題は、バッキングBeanからハイチャートにデータを取得することです。私のページは今こんな感じです

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

    <script src="http://code.highcharts.com/stock/highstock.js"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
        function chartdata() {

           console.log("Grabbing chart data");
           var data = jQuery("#chartvalue").attr('value');

             }
         });
    </script>
</h:head>
<h:body>
    <h:form prependId="false" >

<a4j:commandButton value="LoadData" oncomplete="chartdata();" action="#{dailyReportBean.loadChartData}" id="chartvalue_btn" />
<h:inputHidden value="#{dailyReportBean.json}" id="chartvalue"  />

        <div id="container">
            <script src="DR_PoolPrice_Graph.js" type="text/javascript"></script>
        </div>
    </h:form>
</h:body>

値がコード化されたプリセットJSファイルは正常にロードされます。したがって、問題は、chartdata（）のデータをhighchartsファイルにアクセスすることと、それをどのように参照するかです。

highchartsファイルは次のようになります

$(function() {
Highcharts.setOptions({
    colors: ['#FFFFCC','#799ECD',]
});

var chart = new Highcharts.StockChart({

    chart: {
        renderTo: 'container',
        backgroundColor: '#FCD5B5',
        borderColor: 'EBBA95',
        borderWidth: 2,
        borderRadius: 10,
        spacingLeft: 40,
        spacingRight: 20,
        zoomType: 'x',
        plotBorderColor: '#346691',
        plotBorderWidth: 1,
        plotBackgroundColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
                ]
        }
    },

    title: {
        text: 'Price'
    },

    rangeSelector: {
        enabled: false
    },

    yAxis: {
        labels: {
            x: -25
        }
    },

    legend: {
        enabled: true,
        floating: false,
        align: 'center',
        backgroundColor: '#FCFFC5',
        borderColor: 'black',
        borderWidth: 1,
        layout: 'horizontal',
        verticalAlign: 'bottom',
        y: 0,
        shadow: true
    },

    navigator: {
        enabled: false
    },

    scrollbar: {
        enabled: false
    },

    navigation: {
        buttonOptions: {
            align: 'right'
        }
    },

    series: [{
        name: 'RAPP',
        data: rapp,
        type: 'area'},
        {
        name: 'Pool Price',
        data: poolprice},
    ]
});
});

これはかなり大きな投稿であると申し訳ありません。私はこれをさまざまな方法で見てみましたが、クリックしなかったので、徹底的にしたかっただけです。ばかげていると思います。

あなたが提供できるどんな入力にも感謝します！

4

2 に答える 2

1

<h:inputHidden>jQueryが更新された値を取得できるように、ajaxリクエストでを更新する必要があります。

<a4j:commandButton ... render="chartvalue" />

より簡単なのは、引数としてそれをoncomplete：に渡すことです。

<a4j:commandButton ... oncomplete="chartdata(#{dailyReportBean.json})" />

と

<script type="text/javascript">
    function chartdata(data) {
        console.log("Chart data already retrieved: " + data);
    }
</script>
于 2012-06-13T21:32:20.593 に答える
1 
/*Ajax call to get the Chart data in JSON Format */
function getJsonChartData(str ) 
           {

    var http_request = new XMLHttpRequest();
    http_request.open("GET", "drawChart.php?client_name="+str, true);

    http_request.onreadystatechange = function() {
        var done = 4, ok = 200;
        if(http_request.readyState == done && http_request.status == ok) {
            my_JSON_object = JSON.parse(http_request.responseText);  // JS json Object to capture the returning json text 
                chart.showLoading(); // show loading image on chart

            /***************** setting data to chart dynamically *************/


            chart.series[1].setData(my_JSON_object[5]); //should be 5

            chart.series[2].setData(my_JSON_object[4]);

            chart.series[3].setData(my_JSON_object[1]);

            chart.series[4].setData(my_JSON_object[0]);

            chart.series[5].setData(my_JSON_object[2]);

                chart.series[6].setData(my_JSON_object[3]);

            chart.xAxis[0].setCategories(my_JSON_object[6]); 



        }
    };
    http_request.send(null);

}

私はあなたの質問に答えましたが、本当に欲しいものが得られませんでした。JSファイルからhighchartデータを動的にロードしようとする場合、ajax呼び出しを実行し、データをJSONオブジェクトとして取得してから設定するのが最善の方法です。上記の例のhighchartのチャートオブジェクトを参照して手動でそのデータを使用したのは、phpファイルを介してデータを設定するために使用した方法です。これが役立つことを願っています:)

于 2012-06-14T06:37:16.780 に答える