如何在 highstock highcharts 中处理 csv 数据（日期时间）月、周、日、小时

Question

我有一个 CSV 文件，格式如下：

<pre id="csv" style="display:none">
DATES,WHOLESALE,ECOMMERCE,RETAIL,LOANS,BONDISSUER
01/10/2018 00:00,25,16,13,1,0
01/10/2018 01:00,24,5,9,3,2
01/10/2018 02:00,28,6,17,0,6

数据范围为 01/10/2018 00:00 - 31/10/2018 00:00 间隔是每小时。我正在使用包含 5 个类别的 highstock 堆叠列：WHOLESALE、ECOMMERCE、RETAIL、LOANS、BONDISSUER。我的问题是，highstock 导航器显示的数据不正确。我想我必须在范围选择器或导航器中自定义属性，但我在网上找不到任何文档。我尝试了 inputDateParser，但没有用。这是 jsfiddle

inputDateParser: function (value) {
        value = value.split(/[:\.]/);
        return Date.UTC(
            1970,
            0,
            1,
            parseInt(value[0], 10),
            parseInt(value[1], 10),
            parseInt(value[2], 10),
            parseInt(value[3], 10)
        );
    }

如何根据 CSV 中的日期获取正确的数据范围：2018 年 10 月？当我只有十月份的数据时，我不应该在导航器中看到一整年。非常感谢

Answer 1

您需要正确设置日期格式，可以使用 beforeParse 回调函数来完成，如下所示：

data: {
  csv: document.getElementById('csv').innerHTML,
  beforeParse: function(e) {
    let csv = e.split('\n'); //split by newline
    let processedTable = []
    processedTable.push(csv[0].split(','))
    for (let i = 1; i < csv.length; i++) {
      let row = csv[i].split(',');
      if (row.length != 6) //skip empty rows or rows with more/less columns
        continue;
      let date = row[0].split(' ')[0].split('/')
      let time = row[0].split(' ')[1].split(':')

      processedTable.push(
        [(new Date(date[2], date[1] - 1, date[0], time[0], time[1], 0)).getTime(), //get the timestamp for the date 
          parseInt(row[1]),
          parseInt(row[2]),
          parseInt(row[3]),
          parseInt(row[4]),
          parseInt(row[5])
        ].join(',')
      )
    }
    return processedTable.join('\n') //join the array into a string again
  },
},

解析每一行，将其分开，找到日期，getTime() 返回自 1970 年以来的毫秒数。然后我们将单元格连接成字符串，最后将行连接成一个长字符串。我们将其转换回字符串的原因是因为 highcharts 将从字符串中读取它。

工作 JSFiddle 示例： https://jsfiddle.net/ewolden/spmtgv3a/

API 在 beforeParse: https://api.highcharts.com/highcharts/data.beforeParse

如何在 highstock highcharts 中处理 csv 数据（日期时间）月、周、日、小时

How to process csv data (datetime) month, week, day, hour in highstock highcharts

csv

navigator

highcharts