Question

我有fetch()的数据，一旦可用，就会添加到时间序列图表中。收到的数据格式为

[
    {
        "count": 1932,
        "date": "2018-03-29T00:00:00"
    },
    {
        "count": 3957,
        "date": "2018-03-28T00:00:00"
    },
    {
        "count": 3864,
        "date": "2018-03-27T00:00:00"
    },
]

我使用addPoint()来更新图表。

图表使用Y（＆＃34; count＆＃34;）正确更新，但X轴用秒勾选。

这表明时间数据格式错误。但是，以下代码（构建图表）

let chart = Highcharts.chart("app", {
    xAxis: {
        type: "datetime"
    },
    series: [
        {
            name: "candidates",
            data: [],
        },
        {
            name: "scanned",
            data: [],
        },
    ],
})

// get candidates
fetch("https://example.com/rpc/candidat_per_day", {
        method: "POST",
        body: JSON.stringify({
            "limit_days": 15
        }),
        headers: new Headers({
            'content-type': 'application/json'
        }),
    })
    .then(r => r.json())
    .then(r => {
        r.reverse().pop()
        r.forEach(data => {
            console.log(moment(data.date).format("x"))
            chart.series[0].addPoint([moment(data.date).format("x"), data.count])
        })
    })

fetch("https://example.com/rpc/scanned_per_day", {
        method: "POST",
        body: JSON.stringify({
            limit_days: 15,
        }),
        headers: new Headers({
            "content-type": "application/json",
        }),
    })
    .then(r => r.json())
    .then(r => {
        r.reverse().pop()
        r.forEach(data => {
            d = moment(data.date).format("x")
            console.log(d)
            chart.series[1].addPoint([d, data.count])
        })
    })

输出控制台号码，例如1521414000000或1521500400000。当converting them independently我分别得到2018年3月18日和19日时 - 这些数据的预计日期，并确认它们以毫秒为单位。

更糟糕的是：当尝试通过将这些点添加到现有图表来复制问题时，一切正常：

＆＃13;

let chart = Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },

  series: [{
    data: []
  }]
});

chart.series[0].addPoint([1519772400000, 5])
chart.series[0].addPoint([1520895600000, 6])
chart.series[0].addPoint([1521241200000, 4])

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

＆＃13;

我在复制代码和我执行的代码之间看到的差异是fetch()部分（和promises处理）但我没有看到代码不能以这种方式工作的任何原因。

我相信在某个地方存在一个小问题（可能是在处理时间的时候），但在盯着代码几个小时后我找不到任何错误。我接下来应该尝试什么？

Answer 1

这里的问题是format()函数返回字符串：

// in console:
moment().format("x")
"1522407551509"

Highcharts希望x坐标为数字。

您可以使用parseInt()进行转化：

＆＃13;

console.log(parseInt(moment().format("x")))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>

＆＃13;

有没有一种特定的方法在构建图表后从fetch（）添加数据点？

1 个答案: