Question

我需要帮助!!，我正在开发谷歌甘特图，如google示例，但试图从mysql解析。在同一个php页面中，我使用json输出构建查询，然后使用javascript读取它但我在可视化中出现错误。我验证了json输出，它没问题，所以不知道错误在哪里，也许是json是如何构建的，感谢和问候。

这是php：

<?php  
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

$result = $con->query('SELECT * FROM gantt_tasks');

$rows = array();
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles.
array('label' => 'task_id', 'type' => 'string'),
array('label' => 'task_name', 'type' => 'string'),
array('label' => 'start_date', 'type' => 'date'),
array('label' => 'end_date', 'type' => 'date'),
array('label' => 'duration', 'type' => 'number'),
array('label' => 'progress', 'type' => 'number'),
array('label' => 'dependencies', 'type' => 'string')
);
/* Extract the information from $result */
foreach($result as $r) {
  $temp = array();
  // Values of the each slice
  $temp[] = array('v' =>  $r['task_id']); 
  $temp[] = array('v' =>  $r['task_name']); 
  $temp[] = array('v' =>  $r['start_date']); 
  $temp[] = array('v' =>  $r['end_date']); 
  $temp[] = array('v' => (int) $r['duration']); 
  $temp[] = array('v' => (int) $r['progress']); 
  $temp[] = array('v' =>  $r['dependencies']); 
  $rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable_act = json_encode($table);
echo $jsonTable_act;
?>

这是

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(<?=$jsonTable_act?>);
  var options = {
      height: 275
    };
  // Instantiate and draw our chart, passing in some options.
  var chart = new 
google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

和这个

 <div id="chart_div"></div>

这是谷歌甘特图中的例子

function drawChart（）{

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['Research', 'Find sources', null,new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
    ['Write', 'Write paper', 'write',null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
    ['Cite', 'Create bibliography', 'write',null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
    ['Complete', 'Hand in paper', 'complete',null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
    ['Outline', 'Outline paper', 'write',null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
  ]);

json结果：

{＆＃34; COLS＆＃34;：[{＆＃34;标签＆＃34;：＆＃34; TASK_ID＆＃34;＆＃34;类型＆＃34;：＆＃34;数＆＃34; }，{＆＃34;标签＆＃34;：＆＃34; TASK_NAME＆＃34;＆＃34;类型＆＃34;：＆＃34;串＆＃34;}，{＆＃34;标签＆＃34 ;: ＆＃34;起始日期＆＃34;＆＃34;类型＆＃34;：＆＃34;日期＆＃34;}，{＆＃34;标签＆＃34;：＆＃34; END_DATE＆＃34;＆＃34 ;类型＆＃34;：＆＃34;日期＆＃34;}，{＆＃34;标签＆＃34;：＆＃34;持续时间＆＃34;＆＃34;类型＆＃34;：＆＃34;数＆＃ 34;}，{＆＃34;标签＆＃34;：＆＃34;进度＆＃34;＆＃34;类型＆＃34;：＆＃34;数＆＃34;}，{＆＃34;标签＆＃34 ;：＆＃34;依赖性＆＃34;＆＃34;类型＆＃34;：＆＃34;串＆＃34;}]，＆＃34;行＆＃34;：[{＆＃34; C＆＃34; ：[{＆＃34; v＆＃34;：＆＃34;＆＃34;}，{＆＃34; v＆＃34;：＆＃34; Impresion＆＃34;}，{＆＃34; v＆＃34 ;：＆＃34;日期（2017年，5月15日）＆＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5,20）＆＃34;}，{＆＃34; v＆＃34;：0}，{＆＃34; v＆＃34;：100}，{＆＃34; v＆＃34;：＆＃34; 0＆＃34;}]}，＃34 {＆ ; c＆＃34;：[{＆＃34; v＆＃34;：＆＃34; b＆＃34;}，{＆＃34; v＆＃34;：＆＃34; Acabado手册＆＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5月15日）和＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5,18）＆＃ 34;}，{＆＃34; v＆＃34;：3}，{＆＃34; v＆＃34; 25}，{＆＃34; v＆＃34;：＆＃34;＆＃34;}] }，{＆＃34; C＆＃34;：[{＆＃34; v＆＃34;：＆＃34; C＆＃34;}，{＆＃34; v＆＃34;：＆＃34; Laminado＆＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5,15）＆＃34 ;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5月17日）和＃34;}，{＆＃34; v＆＃34;：1}，{＆＃34; v＆＃34; 20}，{＆＃34; v＆＃34;：＆＃34;＆＃34;}]}，{＆＃34; C＆＃34;：[{＆＃34; v＆＃34 ;: ＆＃34; d＆＃34;}，{＆＃34; v＆＃34;：＆＃34; Empaque＆＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5， 15）＆＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5,19）＆＃34;}，{＆＃34; v＆＃34;：1}，{ ＆＃34; v＆＃34;：0}，{＆＃34; v＆＃34;：＆＃34; C＆＃34;}]}，{＆＃34; C＆＃34;：[{＆＃34; v＆＃34;：＆＃34; E＆＃34;}，{＆＃34; v＆＃34;：＆＃34;科尔特＆＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5月17日）＆＃34;}，{＆＃34; v＆＃34;：＆＃34;日期（2017年，5,19）＆＃34;}，{＆＃34; v＆＃34; ：1}，{＆＃34; v＆＃34;：100}，{＆＃34; v＆＃34;：＆＃34;＆＃34;}]}]}

但仍无效。并没有错误，为什么？非常感谢

谷歌甘特图

0 个答案: