在没有解析 JSON 的情况下获取高图表数据
Get highcharts data without parseJSON
我正在尝试让高图表通过 AJAX 查询动态更新图表。目前,我让服务器为新图表返回 JSON,然后我使用 parseJSON 对其进行解析。这一切都很好,除了一件事 - highcharts 代码的通常格式不是真正的 JSON,因此文件中图表的格式不同。(例如,类型:"bar"必须变为"type":"bar"才能获得正确的 JSON。
以下是主页的代码:
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20,
style: {
color: 'rgb(103,103,103)',
fontFamily: '"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif'
}
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20,
style: {
color: 'rgb(103,103,103)'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)',
style: {
color: 'rgb(103,103,103)'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
color: 'rgb(62,144,200)',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
point: {
events: {
click: function() {
$.get('thetest/test.php', function (data) {
var temp=jQuery.parseJSON(data);
$('#container').highcharts(temp);
})
}
}
}
}, {
name: 'New York',
color: 'rgb(128,183,101)',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
color: 'rgb(145,111,79)',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
color: 'rgb(207,186,132)',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}, {
name: 'Last One',
color: 'rgb(70,95,119)',
data: [13.9, 14.2, 15.7, 18.5, 21.9, 25.2, 27.0, 26.6, 24.2, 20.3, 16.6, 14.8]
}]
});
});
</script>
这是返回的 JSON:
{
"chart": {
"type": "bar"
},
"title": {
"text": "Historic World Population by Region"
},
"subtitle": {
"text": "Source: Wikipedia.org"
},
"xAxis": {
"categories": ["Africa", "America", "Asia", "Europe", "Oceania"],
"title": {
"text": null
}
},
"yAxis": {
"min": 0,
"title": {
"text": "Population (millions)",
"align": "high"
},
"labels": {
"overflow": "justify"
}
},
"tooltip": {
"valueSuffix": " millions"
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true
}
}
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "top",
"x": -40,
"y": 100,
"floating": true,
"borderWidth": 1,
"backgroundColor": "#FFFFFF",
"shadow": true
},
"credits": {
"enabled": false
},
"series": [{
"name": "Year 1800",
"data": [107, 31, 635, 203, 2]
}, {
"name": "Year 1900",
"data": [133, 156, 947, 408, 6]
}, {
"name": "Year 2008",
"data": [973, 914, 4054, 732, 34]
}]
}
这当然是完美的...但是有没有办法以标准的"highcharts"格式而不是 JSON 格式从测试中传回结果.php?
这里有一个误会... Highcharts没有专门为它设计的配置"格式",即您在问题中提出的问题。 Highcharts采用Javascript配置对象,这与JSON不同。
如果你听说过这样一句话:"每个正方形都是一个矩形,但每个矩形都不是正方形"? 这种说法类似于所有JSON都可以解释为Javascript,但并非所有Javascript都可以解释为JSON。 这很重要,因为这意味着JSON可以被视为Javascript的子集,这意味着它可以被解释为JavaScript(特别是Javascript对象(。 然后,您可以从服务器返回 JSON,并将其转换为 JavaScript 对象以用作您的 anychart 配置对象。
这相关的原因是,看起来从服务器返回的是Javascript对象定义(这是Highcharts实际使用的(,而不是JSON。 问题是你需要将文本转换为Javascript并作为Javascript运行。 这种情况有两种解决方案,其中一种比另一种好得多。
-
由于您当前以文本形式返回 Javascript 对象,因此您可以在该对象上使用 eval(( 函数。 这是一个糟糕的决定,有一种说法是"eval 是邪恶的"。 出于所有原因,您可以在线查找,但您可以毫无问题地使用此路线。
-
另一种选择是当你最初存储你的highcharts配置时,或者当你从你的php文件返回它时,你可以确保语法符合JSON格式。 看起来在您的示例中,这不会对您的编程工作方式产生任何影响,只是更难实现。 这是解决此问题的正确方法。
我将建议另一种方法。
正如Reimius所说,Highcharts使用Javascript对象进行图表配置。配置可以是非常基本的Javascript对象,不涉及任何函数,在这种情况下,您可以将其解析为json并在客户端使用它,通过Ajax调用获取它。不过,我认为这将非常严格。
过去,我克服了这个问题,将服务器端生成的Javascript配置文件包含在html中,就像任何其他Javascript文件一样。最后,这是在浏览器中访问和运行Javascript代码的方法。
例如,假设我想在我的页面上以图表形式显示所选城市的温度,并且我有一个端点来获取配置,如下所示:
<server-address>/temperature/<id>
我从这个端点得到的是一个 getter 函数,如下所示:
function getChartConfig() {
return {
title: {
text: 'Monthly Average Temperature',
x: -20,
style: {
color: 'rgb(103,103,103)',
fontFamily: '"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif'
}
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20,
style: {
color: 'rgb(103,103,103)'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)',
style: {
color: 'rgb(103,103,103)'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
color: 'rgb(62,144,200)',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
point: {
events: {
click: function() {
$.get('thetest/test.php', function (data) {
var temp=jQuery.parseJSON(data);
$('#container').highcharts(temp);
})
}
}
}
}, {
name: 'New York',
color: 'rgb(128,183,101)',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
color: 'rgb(145,111,79)',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
color: 'rgb(207,186,132)',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}, {
name: 'Last One',
color: 'rgb(70,95,119)',
data: [13.9, 14.2, 15.7, 18.5, 21.9, 25.2, 27.0, 26.6, 24.2, 20.3, 16.6, 14.8]
}]
});
}
}
然后,您可以拥有如下HTML源代码:
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Notice Highcharts configuration is included as a javascript file -->
<script type='text/javascript' src='<server-address>/temperature/1'></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts(getChartConfig());
</script>
现在,您不必以静态方式包含它,您可以使用JQuery getScript函数或其他方式动态加载Javascript。
我不确定这是否符合您的需求,但您明白了。我相信您可以将逻辑应用于您的需求。这在过去对我有用。
如果我理解正确,您需要做的就是将 JSON 字符串解析为一个对象:
var json = '{ "chart": { "type": "bar" } }',
parsed = JSON.parse(json);
$('#container').highcharts(parsed);
http://jsfiddle.net/3QG6Q/
是的,你需要获取 JSON,这可以通过 json_encode(( 函数在 php 中返回。
- 如何在不需要单击按钮的情况下获取选项的值
- 如何在没有回调的情况下获取有关元素的信息
- 在不使用sort()的情况下获取HTML LI元素的副本
- Javascript如何在不使用画布的情况下获取鼠标位置
- Javascript在没有jQuery的情况下获取X父节点
- Rails/JS-在不刷新页面的情况下获取变量
- jQuery在不刷新页面的情况下获取每个A标记的值
- 在没有jquery的情况下获取iframe中的特定内容
- AJAX/JS:是否可以在没有提交按钮和刷新页面的情况下获取输入文本的值
- 如何在不使用事件的情况下获取元素的 pageX 和 pageY
- 角度 - 在不使用 ng-repeat的情况下获取数据长度
- AngularJS:在不修改ng模型的情况下获取选择标签
- 我可以在没有对象函数调用的情况下获取(可能是计算的)属性值吗?
- 如何在选中数组复选框的情况下获取数组文本框的验证
- 索引数据库,如何在不重新加载页面的情况下获取更新的数据
- 如何在没有元素的情况下获取文件引用对象
- 如何在没有jQuery的情况下获取事件目标
- JavaScript:在没有画布的情况下获取 ImageData
- 在没有解析 JSON 的情况下获取高图表数据
- 如何在没有图像的情况下获取链接