highcharts 不确定如何从外部 json 加载数据答案

【问题标题】：highcharts not sure how to load data from external jsonhighcharts 不确定如何从外部 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 格式是完全关闭的还是有办法让它工作？

谢谢！

【问题讨论】：

标签： javascript jquery json highcharts

【解决方案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