javascript - 如何动态添加数据做谷歌时间线图表?
问题描述
实际上,我正在尝试使用 Google Timeline Chart 制作餐厅预订系统。
我只是在尝试时间轴和 onClick 的功能,我会使用表单中的值将新数据添加到图表中。
随后,数据将保存在数据库中,甚至在页面加载时从数据库中加载。
这是javascript代码
<script type="text/javascript">
google.charts.load("current", { packages: ["timeline"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Tavolo' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['Tavolo 1', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
['Tavolo 2', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
['Tavolo 3', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
['Tavolo 3', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
['Tavolo 3', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
['Tavolo 4', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
['Tavolo 4', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
['Tavolo 5', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 30, 0)],
['Tavolo 6', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 30, 0)],
['Tavolo 7', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
['Tavolo 8', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
['Tavolo 8', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
['Tavolo 9', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)]]);
var options = {
timeline: { singleColor: '#ff0000' }
};
chart.draw(dataTable, options);
// Function to remove 0 value bars
(function () {
var el = container.getElementsByTagName("rect");
var width = 100000000;
var elToRem = [];
for (var i = 0; i < el.length; i++) {
var cwidth = parseInt(el[i].getAttribute("width"));
if (cwidth < width) {
elToRem = [el[i]];
width = cwidth;
}
else if (cwidth == width) {
elToRem.push(el[i]);
}
}
for (var i = 0; i < elToRem.length; i++)
elToRem[i].setAttribute("fill", "none");
})();
}
function addPrenotazione() {
dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
}
</script>
解决方案
每当添加新数据或更改选项时,必须重新绘制图表。
function addPrenotazione() {
dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
chart.draw(dataTable, options);
}
将上面的函数移到函数内部drawChart
,
这将允许函数访问dataTable
和chart
变量...
也不建议在元素上使用内联事件处理程序...
onclick="addPrenotazione"
相反,在drawChart
函数中添加事件......
document.getElementById('prenota').addEventListener('click', addPrenotazione); // 'prenota' or whatever the button id is...
最后,在修改图表元素时,等待'ready'
,
确保图表绘制完成...
// Function to remove 0 value bars
google.visualization.events.addListener(chart, 'ready', function () {
var el = container.getElementsByTagName("rect");
var width = 100000000;
var elToRem = [];
for (var i = 0; i < el.length; i++) {
var cwidth = parseInt(el[i].getAttribute("width"));
if (cwidth < width) {
elToRem = [el[i]];
width = cwidth;
}
else if (cwidth == width) {
elToRem.push(el[i]);
}
}
for (var i = 0; i < elToRem.length; i++)
elToRem[i].setAttribute("fill", "none");
});
建议设置类似于以下...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Tavolo' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['Tavolo 1', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
['Tavolo 2', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
['Tavolo 3', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
['Tavolo 3', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
['Tavolo 3', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
['Tavolo 4', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
['Tavolo 4', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
['Tavolo 5', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 30, 0)],
['Tavolo 6', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 30, 0)],
['Tavolo 7', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
['Tavolo 8', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
['Tavolo 8', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
['Tavolo 9', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)]
]);
var options = {
timeline: { singleColor: '#ff0000' }
};
chart.draw(dataTable, options);
// Function to remove 0 value bars
google.visualization.events.addListener(chart, 'ready', function () {
var el = container.getElementsByTagName("rect");
var width = 100000000;
var elToRem = [];
for (var i = 0; i < el.length; i++) {
var cwidth = parseInt(el[i].getAttribute("width"));
if (cwidth < width) {
elToRem = [el[i]];
width = cwidth;
}
else if (cwidth == width) {
elToRem.push(el[i]);
}
}
for (var i = 0; i < elToRem.length; i++)
elToRem[i].setAttribute("fill", "none");
});
document.getElementById('prenota').addEventListener('click', addPrenotazione);
function addPrenotazione() {
dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
chart.draw(dataTable, options);
}
});
您需要使日期与原始数据的格式相匹配,
年份使用零。
function addPrenotazione() {
var dateBeg = new Date($("#datainizio").val());
var dateEnd = new Date($("#datafine").val());
dataTable.addRow(["Tavolo" + $("#tavolo").val(), new Date(0, 0, 0, dateBeg.getHours(), dateBeg.getMinutes(), dateBeg.getSeconds()), new Date(0, 0, 0, dateEnd.getHours(), dateEnd.getMinutes(), dateEnd.getSeconds())]);
chart.draw(dataTable, options);
}
推荐阅读
- java - Propagation Required 和 Requires_new 的示例
- go - 结果到达时如何管理缓存服务器上的重复请求
- reactjs - Material UI:在 theme.ts 文件中引用 createMuiTheme 的其他属性?
- python - Pandas 条件聚合和非条件聚合在一起
- rust - 如何拆分、去抖动和加入流?
- python - 一张图像内的关键点匹配
- microsoft-teams - 您可以在 Teams 选项卡中使用 Microsoft Graph Toolkit
- python-3.x - 为 MagickMock 设置返回值和测试 method_calls
- typescript - 如何在打字稿中拥有一个包含类型信息的全局可扩展对象?
- powerpoint - 引用现有 Excel 对象