Question

我无法以任何方式导入我的JSON，我对JS很新，所以可能是一个非常愚蠢的问题。无论如何，我的完整代码来自一个例子：

＆＃13;

<!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>

＆＃13;

如果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创建JSON，通过进行SQL查询，所以我的data.php实际上是这样的：{{1} }

但是，我通过json_encode创建JSON，通过进行SQL查询，所以我的data.php实际上是这样的：

[{"id":"1","time":"12.00"},{"id":"2","time":"13.00"}]

基本上，我需要Y轴为＆＃34; id＆＃34;和x轴＆＃34;时间＆＃34;。

我已经尝试了很多次，但我甚至无法加载图表。我的JSON格式是完全关闭的还是有办法让它工作？

谢谢！

Answer 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}]

我已经测试并获得了类似下面的内容：

希望有所帮助。

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

1 个答案: