我怎样才能把一个豆荚GSON字符串带到Highcharts [英] How can I take a backingbean GSON string to Highcharts
问题描述
{Pool Price：[{date：Date .UTC（2012,5,4,1）， 数据： 1144.144}，{ 日期： 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），data：10.87}]}
说到页面，我从HighCharts示例页面的JSFiddle中设计了一个图表，并使用一些硬编码的值来获得外观/设计权限。
现在我的问题是获取数据从支持豆，高地图。我的网页现在看起来像这样
< h：head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jstype =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（抓取图表数据）;
var data = jQuery（＃chartvalue）。attr（'value'）;
}
}）;
< / script>
< / h：头>
< h：body>
< a4j：commandButton value =LoadDataoncomplete =chartdata（）; action =＃{dailyReportBean.loadChartData}id =chartvalue_btn/>
< h：inputHidden value =＃{dailyReportBean.json}id =chartvalue/>
< div id =container>
< script src =DR_PoolPrice_Graph.jstype =text / javascript>< / script>
< / div>
< / h：表格>
< / h：body>
一个预设的JS文件，其中编码的值加载正常。因此，问题只是将chartdata（）中的数据存储到highcharts文件中，以及我如何引用它。
以下是highcharts文件的样子
$（function（）{
Highcharts.setOptions（{
colors：['#FFFFCC'，'＃799ECD '，]
}）;
var chart = new Highcharts.StockChart（{
图：{
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， 25 5，255）']，
[1，'rgb（200，200，255）']
]
}
}，
title ：{
text：'Price'
}，
rangeSelector：{
enabled：false
}，
yAxis ：{
标签：{
x：-25
}
}，
图例：{
启用：true，
floating：false，
align：'center'，
backgroundColor：'＃FCFFC5'，
borderColor：'black'，
borderWidth：1，
layout：'水平'，
verticalAlign：'bottom'，
y：0，
shadow：true
}，
navigator：{
enabled： false
}，
滚动条：{
启用：false
}，
导航：{
buttonOptions：{
align：'right'
}
}，
系列： [{
name：'RAPP'，
data：rapp，
type：'area'}，
{
名称：'Pool Price'，
数据：poolprice}，
]
}）;
}）;
我很抱歉，这是一个相当大的帖子，我只是想彻底，我试着看着这一堆不同的方式，它只是不点击我。我相信这是愚蠢的。
感谢您提供任何输入！
/函数getJsonChartData（str）
{
>
/ * Ajax调用获取JSON格式的图表数据* /
函数getJsonChartData 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捕获返回的json文本
chart.showLoading（）; //在图表上显示加载图像
/ *****************将数据动态设置为图表************ * /
chart.series [1] .setData（my_JSON_object [5]）; //应该是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对象来获取，然后通过引用highchart的图表对象来手动设置数据。我怎么用它来设置数据，通过一个PHP文件，希望这有助于：）
I'm fairly new when it comes to JS, jQuery and JSON stuff, so any help is greatly appreciated. I have a project I am trying to work with Highcharts on, that's JSF 2.2, RichFaces 4. I've already got my backing bean which pulls data from a database, and put's store's in a collection. I then convert the collection to a GSON string. A sample of the data, from a printout of the GSON object is
{"Pool Price":[{"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"}]}
When it comes to the page, I designed a chart in JSFiddle from the HighCharts example page, and used some hard-coded values to get the look/design right.
My problem now, is getting the data from the backing bean, to highcharts. My page right now looks like this
<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>
A preset JS file with the values coded in, loads fine. So the problem is just acessing the data from in chartdata() to the highcharts file, and how i reference that.
Here's what the highcharts file looks like
$(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},
]
});
});
I am sorry that this is a rather large post, I just wanted to be thorough, as I've tried looking at this a bunch of different ways and it's just not clicking for me. I am sure it's something silly.
Thanks for any input you can provide!
/*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);
}
I went through with your question , but didn't got what you really wanted , any way if you trying to load highchart data dynamically from a JS file best way is to do a ajax call and get the data as a JSON object , then set that data manually by referring highchart's chart object above example is what how I used it to set data , via a php file , hope this helps :)
这篇关于我怎样才能把一个豆荚GSON字符串带到Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
