Question

当谈到JS，jQuery和JSON时，我相当新，所以非常感谢任何帮助。我有一个项目，我正在尝试使用Highcharts，这是JSF 2.2，RichFaces 4.我已经有了我的支持bean，它从数据库中提取数据，并将商店放在一个集合中。然后我将集合转换为GSON字符串。来自GSON对象的打印输出的数据样本是

{“Pool Price”：[{“date”：“Date.UTC（2012,5,4,1）”，“data”：“1144.144”}，{“date”：“Date.UTC（2012 ，5,4,2）”， “数据”： “1030.421”}]， “RAPP”：[{ “日期”： “Date.UTC（2012,5,4,1）”， “数据”： “11.50”}，{ “日期”：“Date.UTC（2012,5,4， 2）”， “数据”： “10.87”}]}

当谈到页面时，我在HighFharts示例页面中设计了一个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请求上的<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>

Answer 2

/*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文件中动态加载高图数据最好的方法是做一个ajax调用并将数据作为JSON对象获取，然后通过参考上面的高图的图表对象手动设置该数据示例是我如何使用它来设置数据，通过php文件，希望这有助于：）

如何将后端GSON字符串带到Highcharts

2 个答案: