将组数据填充到 Highcharts 上的特定系列

Question

尝试对两列进行分组，并将其作为特定系列填充到 highcharts 上。我的代码没有对列进行分组，而是将所有数据显示为一个系列。

$query = $db->Prepare("SELECT class, SUM(marks), DATE(date_column) as 
dates FROM classes GROUP BY class,DATE(date_column)");
$query->execute();
while ( $row = $query->fetch(PDO:: FETCH_ASSOC)) {
    $date = $row['dates'];
    $dates[] = $row['dates'];
    $class[] = $row['class'];
    $marks[] = $row['SUM(marks)'];

    $output[] = array($date,(int)$marks);

 }

echo json_encode(array('date'=>$dates,'marks'=>$marks, 'name' => $class)); 

JS

<script>
  $(document).ready(function () {
    $(function() {   
    $.getJSON('data.php', function(data) {
        // Create the chart
       Highcharts.chart('container', {
          title: {
          text: 'class Marks'
          },

            xAxis: {
                categories: data.dates
            },

        series : [{
            "name" : data.name,
            "data": data.marks
        }],

      });
   });
 });
});
</script>

表格

Expected output in JSFiddle

数据响应

date: ["2019-02-07", "2019-02-09", "2019-02-12", "2019-02-08", "2019-02-12", 
"2019-02-13", "2019-03-13",…]
marks: ["45", "166", "78", "64", "64", "627", "87", "352"]
name: ["claas 1", "claas 1", "claas 1", "class 2", "class 2", "class 2", "class 3", "class 3"]

Answer 1

通过查看您的小提琴，您希望 HighCharts 的预期输出如下：

1：类别数据：

• 它应该是一个日期数组。
• 确保删除重复项并按照您想要的升序/降序对它们进行排序，以查看连续图。

"categories":["2019-02-07", "2019-02-08", "2019-02-09", "2019-02-12", "2019-02-13", "2019-02-14"]

2：系列数据：

• 这将是一个对象数组，其中每个对象包含两个属性name 和data。
• 如果您的 categories 数组具有 n 值并且每个值对应于相同的索引，则数据应该没有 n 值。
• 由于我们没有每个班级的每个日期的数据，我们将在此处添加 0。

所以数据看起来像

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

Final Fiddle 可以通过 PHP 使用以下代码实现：

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

更新您的 javascript 代码以反映上述内容

$(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,

            });
        });
    });
});