Witam. Próbuję zmierzyć się z wykresami Highcharts tworzonymi z plików JSON. Mam problem z "przekodowaniem" danych JSON na format akceptowany przez wykresy. Chciałbym utworzyć wykres kolumnowy, który na osi x zawierałby kategorie (2010, 2011, 2012, 2014), a w każdej kategorii 3 serie danych (soki, dżemy, desery), których wartość prezentowana jest na osi y. Bezpośrednie wpisanie danych do serii w opcjach wykresu generuje go poprawnie. Oto kod:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Update Series Data</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var json = [{
//name: 'Soki', data:[70, 75, 65, 90, 85]},
//{name: 'Dżemy', data:[80, 45, 90, 85, 90]},
//{name: 'Desery', data:[80, 80, 90, 101, 90],
}];
var processed_json = new Array();
$.map(json, function(obj, i) {
processed_json.push([obj.name, parseFloat(obj.data)]);
});
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
//type: "category"
categories:['2010','2011','2012','2013','2014']
},
series: [{
//data: processed_json
name: 'Soki', data:[70, 75, 65, 90, 85]},
{name: 'Dżemy', data:[80, 45, 90, 85, 90]},
{name: 'Desery', data:[80, 80, 90, 101, 90],
}]
});
});
</script>
</head>
<body>
<div id="container" style="height: 300px"></div>
</body>
</html>
Po wpisaniu tych danych do zmiennej json wykres nie generuje się już poprawnie. Na osi x jest rok 2010, 2011, 2012, a do każdego roku przypisane są po kolei soki, dżemy, desery. Coś jest nie tak z parsowaniem danych. Nie mogę znaleźć przyczyny i bardzo proszę o pomoc. Kod wygląda tak:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Update Series Data</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var json = [{
name: 'Soki', data:[70, 75, 65, 90, 85]},
{name: 'Dżemy', data:[80, 45, 90, 85, 90]},
{name: 'Desery', data:[80, 80, 90, 101, 90],
}];
var processed_json = new Array();
$.map(json, function(obj, i) {
processed_json.push([obj.name, parseFloat(obj.data)]);
});
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
//type: "category"
categories:['2010','2011','2012','2013','2014']
},
series: [{
data: processed_json
}]
});
});
</script>
</head>
<body>
<div id="container" style="height: 300px"></div>
</body>
</html>
Pozdrawiam
avrfun
