Elm：如何使用时间戳绘制线性图

Question

[
    {
        "timestamp": "2020-04-01T09:47:13+08:00",
        "value": 5.2
    },
    {
        "timestamp": "2020-04-01T09:47:21+08:00",
        "value": 17.7
    },
    {
        "timestamp": "2020-04-01T09:47:21+08:00",
        "value": 27.7
    }
]

如果我在 JSON 中有上述数据的时间戳和值，我想用它来绘制线性时间图，但我不知道如何处理 ISO format 的转换时间戳...因此，我无法将 X 轴修改为时间，如 0623 等...

我制作了一个格式为 Time.Posix 的简单 ellie-app。感谢任何帮助...

ellie-app -> https://ellie-app.com/8RrXJW68WP6a1

Answer 1

您可以使用 rtfeldman/elm-iso8601-date-strings 包将 ISO 8601 字符串解析为 Posix 时间戳。

Iso8601.toTime "2020-04-01T09:47:13+08:00"
// yields: Ok (Posix 1585705633000)

Answer 2

使用 https://github.com/rtfeldman/elm-iso8601-date-strings/tree/1.1.3 怎么样？然后归结为如下使用它：

import Iso8601
import Maybe.Extra as ME

times =
 [
   ("2015-12-01T03:00:00+03:00", 2.5)
   ,("2016-01-01T03:00:00+03:00", 2)
   ,("2016-01-08T03:00:00+03:00", 3.5)
   ,("2016-01-15T03:00:00+03:00", 2)
   ,("2016-01-22T03:00:00+03:00", 3)
   ,("2016-02-01T03:00:00+03:00", 1)
   ,("2016-03-01T03:00:00+03:00", 1.2)
  ]

processTime : (String, Float) -> Maybe (Time.Posix, Float)
processTime (ts, s) =
  Maybe.map (\t -> (t, s)) (Result.toMaybe (Iso8601.toTime ts))


parsedTimes :  Maybe (List (Time.Posix, Float))
parsedTimes = ME.combine (List.map processTime times)


main =
  case parsedTimes of
    Just ts ->
      view ts
    Nothing ->
      Html.text "hello"

或在 Ellie 上：https://ellie-app.com/8RKfbqWmdcfa1

Elm：如何使用时间戳绘制线性图

Elm : How to Plot linear graph with Timestamp

graph

elm