форматирование даты линейной диаграммы google - PullRequest
Новая
       65

форматирование даты линейной диаграммы google

0 голосов
/ 26 мая 2020

Я хотел бы нарисовать линейную диаграмму Google с тенденциями, однако несоответствие типов произошло из-за формата даты.

Ниже приведен мой code.gs, который возвращает значение даты в строку из электронной таблицы в первом столбце .

Я попытался поместить new Date () в JS, чтобы нарисовать линейную диаграмму с трендом, но я не знаю, как поместить это значение даты в datatable. В JS столбцы могут быть добавлены динамически, что и работает. Но я не смог решить проблему с датой, поэтому, пожалуйста, помогите.

Code.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();

      }

1 Ответ

2 голосов
/ 27 мая 2020

вы можете использовать представление данных, чтобы преобразовать строку даты в фактическую дату.

здесь, создайте таблицу данных как обычно.
затем создайте представление данных, используя вычисляемый столбец для столбца даты.
при условии, что первый столбец таблицы данных является строкой даты 

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);

  ...
...