1
몇 시간 동안 검색하여 많은 예제를 찾았지만 결국에는 저에게 도움이되었습니다.
내 문제 : Line-Highchart에 서버 측 json을 사용하고 싶습니다. 예제에서 json은 데이터베이스 또는 이미 미리 만들어진 json 파일에 있습니다.
나의 사용 사례는 다음과 같습니다. 값을 "타임 스탬프"에 따라 시각화하고 싶습니다.서버 측 json을 Highchart와 함께 사용
이 JSON 파일이
<?php
// It reads a json formatted text file and outputs it.
$json_o = file_get_contents("sampledata.json");
echo $json_o;
?>
출력은 sampleData.json처럼 정확하게 입력처럼 보이는, 그래서 정확히 내 getData.php 읽
[{
"timestamp": "2014-05-22T02:15:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T02:30:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T02:45:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:00:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:15:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:30:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:45:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:00:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:15:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:30:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T04:45:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T05:00:00+02:00",
"value": 235.0
}]
sampleData.json 그 자체.
이제 내 highchart.html을 사용하여 하이 차트를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<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/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div><style type='text/css'></style>
<script type='text/javascript'>
$(function() {
$(document).ready(function() {
$(document).ready(function() {
function requestData() {
$.ajax({
url : 'getData.php',
datatype : 'json',
success : function (data) {
alert(data);
chart.series[0].setData(data[0]);
},
cache : false
});
}
var chart;
//Chart bits
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'line',
events : {
load : requestData
}
},
title: {
text: 'Line Chart'
},
xAxis: {
type: 'datetime',
minRange: 1 * 24 * 3600000 // one day
},
yAxis : {
title : {
text : 'Value'
}
},
legend: {
enabled: true
},
series : [{
name : 'Random data',
data : [0]
}
]
});
});
});
});
</script>
</head>
<body></body>
</html>
은 또한 (- 오류 "를로드 할 수 없습니다 XMLHttpRequest의"불행히도 포함) JsFiddle에 모두 넣었습니다하지만 어쩌면 그것은 유용 http://jsfiddle.net/ft8hc/1/
이제 우리는 내 실제 질문에 와서 :
- 지금까지 차트에 데이터가 없습니다. 생성되었지만로드 된 데이터가 없습니다. json 자체가로드됩니다.
alert(data)은 sampleData.json을 표시합니다. - 기존 예제를 살펴 보았지만 선과 축을 그리는 데 사용해야하는 특성을 정의하는 방법을 알아낼 수 없었습니다. 나를 위해 타임 스탬프 및 값 사용해야합니다.
- 또한 json Format이 Highchart에서 사용할 수있는 올바른 것이라면 잘 모르겠습니다. 이런 식으로 괜찮습니까, 아니면 다르게 파싱해야합니까?
누군가 나를 도울 수 있다면 절대적으로 좋을 것입니다. 내가