Ngx-charts 多系列折线图

Question

我正在尝试使用 Ngx-chart 模块在 angular 中创建一个多系列折线图，但目前由于以下问题而停滞不前：

当发送 Date() 格式化数据作为 "name"（x 轴）字段时，数据被预格式化为（非本地化的）UTC 字符串。预格式化会覆盖（可选）[xAxisTickFormatting] 输入字段。下面是我的图表的样子：

我已经尝试创建自定义 xAxisTickFormatting 函数 - 它仍然不起作用，下面是函数。

tickFormatting(value): string {
    console.log(value);
    const date = new Date(value);
    const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);

    const offset = date.getTimezoneOffset() / 60;
    const hours = date.getHours();

    newDate.setHours(hours - offset);

    return newDate.toLocaleString();
  }


</ngx-charts-line-chart
.....
[xAxistickFormatting]="tickFormatting.bind(this)"
>
</ngx-charts-line-chart>

我正在从 django api 中获取我的图形数据。数据的获取方式是这样的，方便理解：

"data": [
        {
            "series": [
                {
                    "name": "2020-02-06T09:32:45.782Z",
                    "value": 1.0
                },
                {
                    "name": "2020-02-06T09:34:52.094Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T08:08:10.395Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-27T08:54:49.915Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T11:47:04.054Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:08.058Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:55.327Z",
                    "value": 1.0
                }
            ],
            "name": "Github"
        }
]

谁能帮忙修复这个错误？

Answer 1

键名中的日期需要转换为 javascript 日期格式才能使用默认的日期 tickFormatting 函数。所以我创建了一个函数，它接受一个对象数组并将键值名称中的所有日期转换为 javascript 新日期对象。这是接收我的 JSON api 响应并将键值名称中的日期转换为 javascript 新日期对象

的打字稿函数

dateConvert(value: []) {
    value.forEach((element: any) => {
      element.series.forEach((item: any) => {
        item.name = new Date(item.name);
      });
    });
  }

这适用于可能遇到相同问题的任何人

Ngx-charts 多系列折线图

Ngx-charts multi series line-chart

angular

typescript

ngx-charts