Ngx-charts 多系列折线图答案

【问题标题】：Ngx-charts multi series line-chartNgx-charts 多系列折线图
【发布时间】：2020-02-18 06:57:16
【问题描述】：

我正在尝试使用 Ngx-chart 模块以角度创建多系列折线图，但目前因以下问题而停滞不前：

当将 Date() 格式的数据作为“名称”（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"
        }
]

谁能帮忙修复这个错误？

【问题讨论】：

标签： angular typescript ngx-charts

【解决方案1】：

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

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

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

【讨论】：