谷歌折线图日期格式

Question

我想绘制带有趋势的谷歌折线图，但是由于日期格式而出现类型不匹配。

下面是我的code.gs，它将日期值从第一列的电子表格中返回到字符串。

我试图将 new Date() 放入 JS 中以绘制带有趋势的折线图，但是我不知道如何将此日期值放入数据表中。 在 JS 中，可以动态添加它工作的列。但我无法解决日期问题，所以请帮忙。

代码.gs

function getSpreadsheetData() {
  var ssID = "1994YM4uwB1mQORl-HLNk6o10-0ADLNQPgUxKGW6iW_8",
      data = SpreadsheetApp.openById(ssID).getSheets()[0].getDataRange().getValues();
  for(var i=1; i<data.length; i++){
      var date = new Date(data[i][0]); 
      data[i][0] = Utilities.formatDate(date, "GMT+9", "M/dd"); 
     } 
 return data;
}

JS

      google.charts.load('current', {'packages':['corechart','controls']}); 
      google.charts.setOnLoadCallback(getSpreadsheetData);

      function getSpreadsheetData() {
          google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
        }

      function drawChart(rows) {
        var data = google.visualization.arrayToDataTable(rows, false);

        var columnsTable = new google.visualization.DataTable();
        columnsTable.addColumn('number', 'colIndex');  // numbrer to date then error
        columnsTable.addColumn('string', 'colLabel');

        var initState= {selectedValues: []}
        for (var i = 1; i < data.getNumberOfColumns(); i++) {
            columnsTable.addRow([i, data.getColumnLabel(i)]);
        }

          var chart = new google.visualization.ChartWrapper({
              chartType: 'LineChart',
              containerId: 'chart_div',
              dataTable: data,
              options: {
                 explorer: { axis: 'horizontal' },
                 pointSize: 3,
                 vAxis : { format: '#.#',
                       viewWindow:{
                            max:0.6,
                            min:0
                        },
                      },
                 hAxis: {format: 'M/dd'},                  
                 legend: 'none', 
                 chartArea: {width: '90%'},
                 crosshair: { trigger: 'both', orientation: 'both' },
                 trendlines: {
                   0: {
                     type: 'polynomial',
                     lineWidth: 5,
                     color: 'orange',
                     labelInLegend: 'Trend',
                     degree: 5,
                     visibleInLegend: true,
                   },
               }
              }
          });

          var columnFilter = new google.visualization.ControlWrapper({
              controlType: 'CategoryFilter',
              containerId: 'colFilter_div',
              dataTable: columnsTable,
              options: {
                  filterColumnLabel: 'colLabel',
                  filterColumnIndex: 1,
                  useFormattedValue: true,
                  ui: {  
                      allowTyping: false,
                      allowMultiple: false,     // when true then filters stacked
                      caption : 'Choose your values',
                      allowNone: true,
                      selectedValuesLayout: 'belowStacked'
                  }
              },
              state: initState
          });

          function setChartView () {
              var state = columnFilter.getState();
              var row;
              var view = {
                  columns: [0]
              };
              for (var i = 0; i < state.selectedValues.length; i++) {
                  row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
                  view.columns.push(columnsTable.getValue(row, 0));
              }
              // sort the indices into their original order
              view.columns.sort(function (a, b) {
                  return (a - b);
              });
              if (state.selectedValues.length > 0) {
                chart.setView(view);
              } else {
                chart.setView(null);
              }
              chart.draw();
          }
          google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

          setChartView();
          columnFilter.draw();

      }

Answer 1

您可以使用数据视图将日期字符串转换为实际日期。

在这里，照常创建数据表。
然后使用日期列的计算列创建数据视图。
假设第一个数据表列是日期字符串

function drawChart(rows) {
  // create data table
  var data = google.visualization.arrayToDataTable(rows, false);

  // create data view
  data = new google.visualization.DataView(data);

  // create view columns with calculated column
  var viewColumns = [{
    calc: function (dt, row) {
      return new Date(dt.getValue(row, 0));
    },
    label: data.getColumnLabel(0),
    type: 'date'
  }];

  // add remaining columns
  for (var = 1; i < data.getNumberOfColumns(); i++) {
    viewColumns.push(i);
  }

  // set view columns
  data.setColumns(viewColumns);

  ...