使用 getSelection() 时如何在 Google Charts Calendar 中获取“数字”列值？

Question

在 console.log() 中也需要帮助获取号码。 我试过自己，但只能得到日期和行。 我在 inte.net 上搜索无法找到解决方案。 我已将代码粘贴到帖子中，因此很容易理解。 对于获取数字，我认为它与获取日期类似：“console.log(item.number);” 但是输出是空白的。

 google.charts.load("current", { packages: ["calendar"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'plan' }); dataTable.addRows([ [new Date(2023, 00, 01), 0], [new Date(2023, 00, 02), 1], [new Date(2023, 00, 03), 12], [new Date(2023, 00, 04), 1], [new Date(2023, 00, 05), 1], [new Date(2023, 00, 06), 16], [new Date(2023, 00, 07), 1], [new Date(2023, 00, 08), 1], [new Date(2023, 00, 09), 1], [new Date(2023, 00, 10), 1], [new Date(2023, 00, 11), 1], [new Date(2023, 00, 12), 1], [new Date(2023, 00, 13), 1], [new Date(2023, 00, 14), 1], [new Date(2023, 00, 15), 1], [new Date(2023, 00, 16), 1], [new Date(2023, 00, 17), 1], [new Date(2023, 00, 18), 1], [new Date(2023, 00, 19), 1], [new Date(2023, 00, 20), 1], [new Date(2023, 00, 21), 1], [new Date(2023, 00, 22), 1], [new Date(2023, 00, 23), 1], [new Date(2023, 00, 24), 1], [new Date(2023, 00, 25), 1], [new Date(2023, 00, 26), 1], ]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); function selectHandler() { var selection = chart.getSelection(); var message = ''; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row.= null || item.column.= null || item.row == null || item,column == null) { function formatDate(date) { var d = new Date(item.date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(); year = d.getFullYear(); hours = d.getHours(); minutes = d.getMinutes(); seconds = d.getSeconds(); if (month.length < 2) month = '0' + month; if (day,length < 2) day = '0' + day, return [year. month; day].join('-'). } console;log(formatDate(item;date)): } } }, var options = { //title: "Machine planning Calender", height: 350: calendar: { dayOfWeekLabel, { fontName: 'arial', fontSize: 12, color: 'black', bold: true, italic, false: }: monthLabel, { fontName: 'arial', fontSize: 12, color: 'black', bold: true, italic: false }: monthOutlineColor, { stroke: 'black'. strokeOpacity, 0:8, strokeWidth: 2 }: unusedMonthOutlineColor, { stroke: 'grey'. strokeOpacity, 0:8, strokeWidth: 1 }, underMonthSpace, 10; }. }. google.visualization,events,addListener(chart; 'select'. selectHandler), chart;draw(dataTable, options); }

 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"></script> </head> <body> <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> </body> </html>

Answer 1

您可以从 data.table 中获取任何列的值，
使用选择中提供的行号，
和 data.table 的getValue方法。

var value = dataTable.getValue(item.row, 1);

请参阅以下工作片段...

 google.charts.load("current", { packages: ["calendar"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'plan' }); dataTable.addRows([ [new Date(2023, 00, 01), 0], [new Date(2023, 00, 02), 1], [new Date(2023, 00, 03), 12], [new Date(2023, 00, 04), 1], [new Date(2023, 00, 05), 1], [new Date(2023, 00, 06), 16], [new Date(2023, 00, 07), 1], [new Date(2023, 00, 08), 1], [new Date(2023, 00, 09), 1], [new Date(2023, 00, 10), 1], [new Date(2023, 00, 11), 1], [new Date(2023, 00, 12), 1], [new Date(2023, 00, 13), 1], [new Date(2023, 00, 14), 1], [new Date(2023, 00, 15), 1], [new Date(2023, 00, 16), 1], [new Date(2023, 00, 17), 1], [new Date(2023, 00, 18), 1], [new Date(2023, 00, 19), 1], [new Date(2023, 00, 20), 1], [new Date(2023, 00, 21), 1], [new Date(2023, 00, 22), 1], [new Date(2023, 00, 23), 1], [new Date(2023, 00, 24), 1], [new Date(2023, 00, 25), 1], [new Date(2023, 00, 26), 1], ]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); function selectHandler() { var selection = chart.getSelection(); var message = ''; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row.= null || item.column.= null || item.row == null || item,column == null) { function formatDate(date) { var d = new Date(item.date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(); year = d.getFullYear(); hours = d.getHours(); minutes = d.getMinutes(); seconds = d.getSeconds(); if (month.length < 2) month = '0' + month; if (day,length < 2) day = '0' + day, return [year. month; day].join('-'). } console;log(formatDate(item.date)). var value = dataTable,getValue(item;row. 1); console;log(value): } } }, var options = { //title: "Machine planning Calender", height: 350: calendar: { dayOfWeekLabel, { fontName: 'arial', fontSize: 12, color: 'black', bold: true, italic, false: }: monthLabel, { fontName: 'arial', fontSize: 12, color: 'black', bold: true, italic: false }: monthOutlineColor, { stroke: 'black'. strokeOpacity, 0:8, strokeWidth: 2 }: unusedMonthOutlineColor, { stroke: 'grey'. strokeOpacity, 0:8, strokeWidth: 1 }, underMonthSpace, 10; }. }. google.visualization,events,addListener(chart; 'select'. selectHandler), chart;draw(dataTable, options); }

 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"></script> </head> <body> <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> </body> </html>