如何将 backingbean GSON 字符串带到 Highcharts

Question

我对 JS、jQuery 和 JSON 的东西还很陌生，因此非常感谢任何帮助。我有一个项目我正在尝试与 Highcharts 合作，那就是 JSF 2.2，RichFaces 4。我已经有了我的支持 bean，它从数据库中提取数据，并将存储放在一个集合中。然后我将集合转换为 GSON 字符串。来自 GSON 对象的打印输出的数据样本是

{"矿池价格":[{"date":"Date.UTC(2012,5,4,1)","data":"1144.144"},{"date":"Date.UTC(2012 ,5,4,2)","数据":"1030.421"}], "RAPP":[{"date":"Date.UTC(2012,5,4,1)","data":"11.50"},{"date":"Date.UTC(2012,5,4, 2)","数据":"10.87"}]}

在页面方面，我从 HighCharts 示例页面中的 JSFiddle 中设计了一个图表，并使用了一些硬编码值来获得正确的外观/设计。

我现在的问题是从支持 bean 获取数据到 highcharts。我现在的页面是这样的

<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},
    ]
});
});

很抱歉，这是一个相当大的帖子，我只是想彻底，因为我尝试了很多不同的方式来查看它，但它只是不适合我。我敢肯定这很愚蠢。

感谢您提供的任何意见！

Answer 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 文件设置数据，希望这会有所帮助:)

Answer 2

您需要更新 ajax 请求上的<h:inputHidden>，以便 jQuery 获取更新后的值。

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