Widząc swoje skrzypce, oczekiwany wynik, który chcesz uzyskać dla HighCharts, jest następujący:
1:Dane kategorii :
- Powinna to być tablica dat.
- Upewnij się, że usuwasz duplikaty i porządkujesz je w kolejności rosnącej/malejącej, w zależności od potrzeb, aby zobaczyć ciągły wykres.
"categories":["2019-02-07", "2019-02-08", "2019-02-09", "2019-02-12", "2019-02-13", "2019-02-14"]
2:Dane serii :
- Byłaby to tablica obiektów, w której każdy obiekt zawiera dwie właściwości
name
idata
. - Dane powinny mieć
n
liczba wartości, jeśli Twojecategories
tablica man
wartości i każda odpowiada temu samemu indeksowi. - Ponieważ nie mamy danych dla każdej daty dla każdej klasy, dodamy tam 0.
Tak więc dane wyglądałyby
"series":[
{
"name":"class 1",
"data":[45,0,166,78,0,0]
},
{
"name":"class 2",
"data":[0,64,0,64,627,0]
},
{
"name":"class 3",
"data":[0,0,0,0,87,352]
}
]
Końcowe skrzypce co można osiągnąć za pomocą PHP za pomocą poniższego kodu:
$arrDates = [];
$arrClass = [];
$arrData = [];
while ( $row = $query->fetch(PDO:: FETCH_ASSOC)) {
$arrDates[] = $row['dates'];
$arrClass[] = $row['class'];
$arrData[$row['class'] . ':' . $row['dates']] = $row['marks']; // to identify for which date & class this marks belong to, we can directly search for index.
}
$arrDates = array_unique($arrDates);
sort($arrDates);
$arrClass = array_unique($arrClass);
// Create series data
$arrSeriesData = [];
foreach($arrClass as $strClass){
$tempArr = ['name' => $strClass];
foreach($arrDates as $strDate){
$tempArr['data'][] = isset($arrData[$strClass . ':' . $strDate]) ? intval($arrData[$strClass . ':' . $strDate]) : 0;
}
$arrSeriesData[] = $tempArr;
}
$response = ['categories' => $arrDates, 'series' => $arrSeriesData];
echo json_encode($response);
Output:
{"categories":["2019-02-07","2019-02-08","2019-02-09","2019-02-12","2019-02-13","2019-02-14"],"series":[{"name":"class 1","data":[45,0,166,78,0,0]},{"name":"class 2","data":[0,64,0,64,627,0]},{"name":"class 3","data":[0,0,0,0,87,352]}]}
Zaktualizuj kod JavaScript, aby odzwierciedlić powyższe
$(document).ready(function() {
$(function() {
$.getJSON('data.php', function(data) {
// Create the chart
Highcharts.chart('container', {
title: {
text: 'class Marks'
},
xAxis: {
categories: data.categories
},
series: data.series,
});
});
});
});