我目前正在使用 Google Charts 進行一個簡單的時間表專案，盡管我遇到了一個問題，我似乎不知道如何解決。
我希望通過用戶輸入更改日期。我已經嘗試了一些東西，但我不知道如何繼續。
這是jsfiddle鏈接：
我嘗試添加表單和變數，但是當我將變數放入日期時它無法識別它。
這是代碼：
google.charts.load("current", {
packages: ["timeline"]
});
G2start = parseInt(document.getElementById('G2startvar').value);
G2end = parseInt(document.getElementById('G2endvar').value);
G3start = parseInt(document.getElementById('G3startvar').value);
G3end = parseInt(document.getElementById('G3endvar').value);
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timechart');
//1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
var options = {
colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
timeline: {
rowLabelStyle: {
fontName: 'Arial',
fontSize: 25,
color: '#0000'
},
barLabelStyle: {
fontName: 'Times New Roman',
fontSize: 32
}
},
'width': 3950,
'height': 5200,
avoidOverlappingGridLines: false
};
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Position'
});
dataTable.addColumn({
type: 'string',
id: 'Name'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
dataTable.addRows([
[Date(), 'Now', new Date(), new Date()],
['Project #1', 'G2', new Date(2022, 11, 15), new Date(2022, 11, 30)],
['Project #1', 'G3', new Date(2022, 11, 30), new Date(2023, 5, 17)],
]);
chart.draw(dataTable, options);
}h1 {
color: #3e74ab;
text-shadow: 1px 1px;
font-family: "Times New Roman", Times, serif;
text-align: center;
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1>Project Timetable</h1>
<body>
<p>Please input your project dates</p>
<form id="form1" onsubmit="drawChart(); return false">
<label for="G2startvar">G1 Start Date: </label><input type="date" id="G2startvar"><br>
<label for="G2endvar">G1 End Date: </label><input type="date" id="G2endvar"><br>
<label for="G3startvar">G2 Start date: </label><input type="DATE" id="G3startvar"><br>
<label for="G3endvar">G2 End Date : </label><input type="date" id="G3endvar"><br>
<button type="submit" value="Submit">Submit</button>
</form>
<div id="timechart" style="height: 1000px;"></div>uj5u.com熱心網友回復：
我想出了這個使用事件偵聽器，在這里，每次使用“更改”事件更新輸入并檢測日期是否有效時，圖表都會重新繪制。
看一下這個：
<head>
<h1>Project Timetable</h1>
<style>
h1 {
color: #3e74ab;
text-shadow: 1px 1px;
font-family: "Times New Roman", Times, serif;
text-align: center;
}
</style>
</head>
<body>
<p>Please input your project dates</p>
G1 start
<input type="date" id="g1s"><br>
G1 end
<input type="date" id="g1e"><br>
G2 start
<input type="date" id="g2s"><br>
G2 end
<input type="date" id="g2e"><br>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load("current", {
packages: ["timeline"]
});
google.charts.setOnLoadCallback(drawChart);
const g1Dates = {start: undefined, end: undefined};
const g2Dates = {start: undefined, end: undefined};
function setDateAndRedraw(datesObj, isStart, dateString) {
const datesArray = dateString.split("-").map(Number);
datesArray[1]--; // Month number to month index
datesObj[isStart ? "start" : "end"] = new Date(...datesArray);
if (datesObj.start && datesObj.end && datesArray[0] > 1990) drawChart(); // Redraw if date has a start and an end, and year is > 1990
}
document.getElementById("g1s").addEventListener("change", e => setDateAndRedraw(g1Dates, true, e.target.value));
document.getElementById("g1e").addEventListener("change", e => setDateAndRedraw(g1Dates, false, e.target.value));
document.getElementById("g2s").addEventListener("change", e => setDateAndRedraw(g2Dates, true, e.target.value));
document.getElementById("g2e").addEventListener("change", e => setDateAndRedraw(g2Dates, false, e.target.value));
function drawChart() {
var container = document.getElementById('timechart');
//1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
var options = {
colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
timeline: {
rowLabelStyle: {
fontName: 'Arial',
fontSize: 25,
color: '#0000'
},
barLabelStyle: {
fontName: 'Times New Roman',
fontSize: 32
}
},
'width': 3950,
'height': 5200,
avoidOverlappingGridLines: false
};
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Position'
});
dataTable.addColumn({
type: 'string',
id: 'Name'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
dataTable.addRows([
[Date(), 'Now', new Date(), new Date()],
['Project #1', 'G2', new Date(2022, 11, 15), new Date(2022, 11, 30)],
['Project #1', 'G3', new Date(2022, 11, 30), new Date(2023, 5, 17)],
]);
if (g1Dates.start && g1Dates.end) {
dataTable.addRows([['Project #1', 'G1', g1Dates.start, g1Dates.end]]);
}
if (g2Dates.start && g2Dates.end) {
dataTable.addRows([['Project #1', 'G2', g2Dates.start, g2Dates.end]]);
}
chart.draw(dataTable, options);
}
</script>
<div id="timechart" style="height: 1000px;"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/536634.html
上一篇：凍結下一次迭代的解值