javascript - 以特定格式将 mysql 数据检索到 javascript 时出现问题

Question

我正在尝试使用 PHP 和 mysql 创建 Highchart 甘特图。我在从 mysql 数据库检索数据时遇到问题。 Highchart Gantt 给出的示例中存储数据的格式为:

 cars = [{
   model: 'Nissan Leaf',
   current: 0,
   deals: [{
     rentedTo: 'Lisa Star',
     from: today - 1 * day,
     to: today + 2 * day
   }, {
     rentedTo: 'Shane Long',
     from: today - 3 * day,
     to: today - 2 * day
   }, {
     rentedTo: 'Jack Coleman',
     from: today + 5 * day,
     to: today + 6 * day
   }]
  }}

例如，这是我的表格:

kategori |sub categori | start_date | end_date
-----------------------------------------------
cat 1    | sub 1       | 2019-03-01 | 2019-03-04
cat 2    | sub 2       | 2019-03-06 | 2019-03-10

我尝试了以下方法从 mysql 表中检索数据，以获得示例中给出的确切格式:

查询:

   $query = "SELECT `kategori`, `sub_kategori`, `start_date`, `end_date`, FROM `table` ";

功能:

public function datatable_mini($query)
{
    $stmt = $this->db->prepare($query);
    $stmt->execute();

    if($stmt->rowCount()>0)

    {
        $y=$stmt->rowCount();
        $x=1;

        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            $start_date = DateTime::createFromFormat('Y-m-d', $row['start_date']);
            $year = $start_date->format('Y');
            $month = $start_date->format('m');
            $day = $start_date->format('d');
        ?>

            {
            <br/>
            <span>Kategori: '<?php print($row['kategori']); ?>',</span>
            <br/><span>current: 0,</span>
            <br/><span>deals: [{</span>
            <br/><span>SubKategori: '<?php print($row['sub_kategori']); ?>',</span>
            <br/><span>Mulai: Date.UTC(<?php print($year); ?>,<?php print($month); ?>,<?php print($day); ?>),</span>
            <br/><span>Selesai: Date.UTC(<?php print(date('Y',strtotime($row['end_date']))); ?>,<?php print(date('m',strtotime($row['end_date']))); ?>,<?php print(date('d',strtotime($row['end_date']))); ?>)</span>
            <br/>
            }]
            <br/>}<?php

            if($x<$y){
                echo ',';
            }
            $x=$x+1;
            ?>
        <?php
        }
    }
    else
    {
       echo "Nothing here...";

    }

}

这是在 JavaScript 中:

   cars = [<?php echo $crud->datatable_mini($query); ?>];

当我尝试回显结果时，它给出了所需的完全相同的格式，如示例所示:

{ 
Kategori: 'cat 1', 
current: 0, 
deals: [{ 
    SubKategori: 'sub 1', 
    Mulai: Date.UTC(2019,03,01), 
    Selesai: Date.UTC(2019,03,04) 
    }] 
}

等等..

但没有显示任何图表。

如何使用示例中给出的格式将 mysql 数据检索到 javascript 中？

Answer 1

highcharts 无法识别您的对象，因为对象名称不正确并且它不在数组中(也许您修复了未显示的数组部分)。

对于上面粘贴的数据，您需要采用以下格式:

[{ 
  data: [{
    name: 'cat 1', 
    id: 'cat 1'
  }, { 
    name: 'sub 1', 
    parent: 'cat 1',
    start: Date.UTC(2019,03,01), 
    end: Date.UTC(2019,03,04),
    completed: {
      amount: 0
    }
  }] 
}],

工作 JSFiddle 示例: https://jsfiddle.net/ewolden/muj5vx1f/6/

请参阅 API 以获取所有已定义对象的列表: https://api.highcharts.com/gantt/series.gantt.data