如何将后端GSON字符串带到Highcharts
当涉及到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）“，”data“：”1030.421“}]，”RAPP“：[{”date“：”Date.UTC（2012,5,4,1）“，”data“：”11.50“}， { “日期”： “Date.UTC（2012,5,4,2）”， “数据”： “10.87”}]}
当谈到页面时，我在HighFharts示例页面中使用JSFiddle设计了一个图表，并使用了一些硬编码值来获得正确的外观/设计。
我现在的问题是从支持bean获取数据到highcharts。 我的页面现在看起来像这样
$(document).ready(function() { function chartdata() { console.log("Grabbing chart data"); var data = jQuery("#chartvalue").attr('value'); } }); 具有编码的值的预设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}, ] }); });
我很抱歉这是一个相当大的post，我只是想彻底，因为我已经尝试了一些不同的方式，它只是没有点击我。 我确信这是愚蠢的。
感谢您提供的任何输入！
/*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文件，希望这有助于:)
您需要更新ajax请求上的
更简单的方法是将其作为参数传递给oncomplete ：
同