[英]Google Charts Gantt Error
Based on this demo: https://jsfiddle.net/api/post/library/pure/基于这个演示: https : //jsfiddle.net/api/post/library/pure/
I'm trying to create a gantt chart.我正在尝试创建甘特图。
This is the code I'm using:这是我正在使用的代码:
google.load("visualization", "1.1", {packages:["gantt"]});
google.setOnLoadCallback(drawGantt());
function drawGantt() {
var $ganttData = new google.visualization.DataTable();
$ganttData.addColumn('string', 'Task ID');
$ganttData.addColumn('string', 'Task Name');
$ganttData.addColumn('string','Resource')
$ganttData.addColumn('date', 'Start Date');
$ganttData.addColumn('date', 'End Date');
$ganttData.addColumn('number', 'Duration');
$ganttData.addColumn('number', 'Percent Complete');
$ganttData.addColumn('string', 'Dependencies');
$array.push(['0000050000000000110010002','ddd','MKT',new Date(2015,11 - 1,26),new Date(2015,11 - 1,30),daysToMilliseconds(daydiff(new Date(2015,11 - 1,26),new Date(2015,11 - 1,30))),25,null])
$array.push(['0000050000000000110010001','Actividad 1','MKT',new Date(2015,11 - 1,10),new Date(2015,11 - 1,11),daysToMilliseconds(daydiff(new Date(2015,11 - 1,10),new Date(2015,11 - 1,11))),4,null]);
$ganttData.addRows($array);
var $ganttOptions = { height: 300, gantt: { trackHeight: 30 } };
var $ganttChart = new google.visualization.GanttChart(document.getElementById('div-Actividades'));
$ganttChart.draw($ganttData, $ganttOptions);
}
As a result, I have this non-understanding error:结果,我有这个不可理解的错误:
This image is from Mozilla Firefox此图片来自 Mozilla Firefox
using IE or Chrome, this is working fine.使用 IE 或 Chrome,这工作正常。
The provided example does not work for me in any browser due to the following issues:由于以下问题,提供的示例在任何浏览器中都不适用于我:
google.setOnLoadCallback
function expects function callback, you need to replace google.setOnLoadCallback(drawGantt());
由于google.setOnLoadCallback
函数需要函数回调,因此您需要替换google.setOnLoadCallback(drawGantt());
with google.setOnLoadCallback(drawGantt);
与google.setOnLoadCallback(drawGantt);
$array
is not initialized,eg var $array = [];
$array
未初始化,例如var $array = [];
null
to Duration
column, it will be calculated automatically based on Start Date
and Start Date
values最后但并非最不重要的是,这不是一个真正的问题,但您可以将null
设置为Duration
列,它将根据Start Date
和Start Date
值自动计算Modified example修改示例
google.load("visualization", "1.1", { packages: ["gantt"] }); google.setOnLoadCallback(drawGantt); function drawGantt() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Task ID'); dataTable.addColumn('string', 'Task Name'); dataTable.addColumn('string','Resource') dataTable.addColumn('date', 'Start Date'); dataTable.addColumn('date', 'End Date'); dataTable.addColumn('number', 'Duration'); dataTable.addColumn('number', 'Percent Complete'); dataTable.addColumn('string', 'Dependencies'); data = []; data.push(['0000050000000000110010002','ddd','MKT',new Date(2015,11 - 1,26),new Date(2015,11 - 1,30),null,25,null]) data.push(['0000050000000000110010001','Actividad 1','MKT',new Date(2015,11 - 1,10),new Date(2015,11 - 1,11),null,4,null]); dataTable.addRows(data); var ganttOptions = { height: 300, gantt: { trackHeight: 30 } }; var ganttChart = new google.visualization.GanttChart(document.getElementById('div-Actividades')); ganttChart.draw(dataTable, ganttOptions); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="div-Actividades"></div>
The specified example works properly in Google Chrome (v46), Mozilla Firefox (v41.0) and IE 9+指定示例在 Google Chrome (v46)、Mozilla Firefox (v41.0) 和 IE 9+ 中正常工作
Probably something in the javascript engine with firefox that is different from IE/Chrome, maybe the format of new Date(2015,11 - 1,11)
?可能是带有 firefox 的 javascript 引擎中与 IE/Chrome 不同的东西,也许是new Date(2015,11 - 1,11)
的格式?
Look at this answer to another question .看看这个对另一个问题的回答。
Here is some more interesting reading about formatting dates.这里有一些关于格式化日期的更有趣的阅读。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.