highcharts 不确定如何从外部 json 加载数据
Posted
技术标签:
【中文标题】highcharts 不确定如何从外部 json 加载数据【英文标题】：highcharts not sure how to load data from external json 【发布时间】：2018-09-18 12:46:56 【问题描述】：我无法以任何方式导入我的 JSON，我对 JS 很陌生，所以可能是一个非常愚蠢的问题。无论如何，我的完整代码来自一个示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function()
var chart;
$(document).ready(function()
$.getJSON("data.php", function(json)
chart = new Highcharts.Chart(
chart:
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
,
title:
text: 'Revenue vs. Overhead',
x: -20 //center
,
subtitle:
text: '',
x: -20
,
xAxis:
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
,
yAxis:
title:
text: 'Amount'
,
plotLines: [
value: 0,
width: 1,
color: '#808080'
]
,
tooltip:
formatter: function()
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
,
legend:
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
,
series: json
);
);
);
);
</script>
</head>
<body>
<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: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>如果 data.php 的格式与示例相同：[ "name": "Revenue", "data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221] , "name": "Overhead", "data": [21990, 22365, 21987, 22369, 22558, 22987, 23521, 23003, 22756, 23112, 22987, 22897] ] 但是，我通过 json_encode 通过 SQL 查询创建 JSON，所以我的 data.php 实际上是这样的：["id":"1","time":"12.00","id":"2","time":"13.00"]
但是，我通过 json_encode 通过 SQL 查询创建 JSON，所以我的 data.php 实际上是这样的：
["id":"1","time":"12.00","id":"2","time":"13.00"]
基本上，我需要 Y 轴为“id”，x 轴为“时间”。
我已经尝试了很多次，但我什至无法加载图表。我的 JSON 格式是完全关闭的还是有办法让它工作？
谢谢！
【问题讨论】：
【参考方案1】：我建议创建一个格式函数来将您的数据转换为预期的格式：
const format = (arr) =>
let ids = arr.map((item) =>
return Number(item.id);
);
let times = arr.map((item) =>
return item.time;
);
return
ids,
times
;
例如：
let data = ["id":"1","time":"12.00","id":"2","time":"13.00"];
let json = format(data);
// json = ids: [Array of IDs], times: [Array of times]
那么就可以使用json数据通过Highcharts.Chart：
...
xAxis:
categories: json.times
,
...
series: [name: 'IDs', data: json.ids]
我已经测试并得到了如下所示：
希望对您有所帮助。
【讨论】：
非常有帮助，谢谢！我需要一段时间才能开始，但现在至少我有了方向。 你能把完整的代码发给我吗？我似乎仍然有麻烦...尤其是用 jquery 解析 json以上是关于highcharts 不确定如何从外部 json 加载数据的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery UI 滑块动态更新 highcharts