在谷歌图表中格式化字符串值，如日期

Question

我正在使用角度图表和谷歌图表做一个应用程序，我有一个从 GraphQL 提取的数据，它返回一个包含日期和两个值的数组，第一行对应于数组中的字段名称：

myArray = [
        ["Date", "upx", "upn"],
        ["2017-02-01", 0.031, 2],
        ["2017-02-02", 0.051, 1],
        ["2017-02-03", 0.041, 6],
    ]

从graphQL获取数据后，我有一个类似于之前代码的数组数组，我正在使用google可视化arrayToDataTable将此数组转换为DataTable：

let data = google.visualization.arrayToDataTable(myArray);

我有一个文件，其中包含为每个图表和日期字段的列位置指定模式格式化程序的配置，如下所示：

 google: {
  type: 'LineChart',
  options: {
    isStacked: true,       
    hAxis: {
      title: 'Date',
      type: 'date',
      format: 'MMM/dd/yy'
    },
    vAxis: {
      title: 'Absenteeism',
      format: 'percent',
      gridlines: {
        count: 10
      },
      step: 1,
    }
  },
  formatters: {
      date: [
        {
          columnNum: 0,
          pattern: '"MMM/yyyy"
        }
      ],
      number: [
        {
          columnNum: 1,
          pattern: '#.##',
          fractionDigits: 2
        }      
      ]
    }
}

所以我将此配置传递给绘制图表的函数：

<div [chartData]="data" [chartFormatters]="google.formatters" [chartOptions]="google.options" [chartType]="google.type" GoogleChart></div>

现在我正在尝试将字符串转换为日期但不起作用：

for (var formatType in chartFormatters) {
    switch (formatType) {
      case 'number':
        chartFormatters[formatType].forEach(ItemFormatter => {
          let formatter = new google.visualization.NumberFormat(ItemFormatter);
          formatter.format(data, ItemFormatter.columnNum);
        });
        break;
      case 'date':         
        chartFormatters[formatType].forEach(ItemFormatter => {            
          let formatter = new google.visualization.DateFormat(ItemFormatter);
          formatter.format(data, ItemFormatter.columnNum);
        });
        break;
      default:
        break;
    }
  }

如何在我的第一个数组中将字符串转换为日期格式，我的问题是我有许多查询从 graphql 返回相似的数据以使用相同的角度函数绘制图表，但日期字段是否存在于所有结果中对于所有查询都处于相同的位置。

Answer 1

日期列中的值需要转换为实际日期，

在格式化程序起作用之前，数组需要看起来像......

myArray = [
  ["Date", "upx", "upn"],
  [new Date("2017-02-01"), 0.031, 2],
  [new Date("2017-02-02"), 0.051, 1],
  [new Date("2017-02-03"), 0.041, 6]
];