React:如何在Highcharts中以月为单位显示正确的日期和绘图数据 [英] React: How to show correct date and plot data as Months in Highcharts

问题描述

我正在尝试使用Highchart在React上绘制一些数据.每次绘制时，x轴都会显示错误的日期时间，如下图所示:

I'm trying to plot some data using Highchart on react. Every time I plot it my x-axis displays wrong date time, like the following picture:

我当前的json数据如下:

My current json data is like this:

 ["Sun, 02 Feb 2020 00:00:00 GMT", 73]
 ["Sun, 09 Feb 2020 00:00:00 GMT", 71]
 ["Sun, 16 Feb 2020 00:00:00 GMT", 73]
 ["Sun, 23 Feb 2020 00:00:00 GMT", 87]
 ["Sun, 01 Mar 2020 00:00:00 GMT", 86]
 ["Sun, 08 Mar 2020 00:00:00 GMT", 65]
 ["Sun, 15 Mar 2020 00:00:00 GMT", 70]
 ["Sun, 22 Mar 2020 00:00:00 GMT", 80]
 ["Sun, 29 Mar 2020 00:00:00 GMT", 77]
 ["Sun, 05 Apr 2020 00:00:00 GMT", 80]

我希望它只显示年份和月份.例如

I want it to display only the year and the months. E.g

2020年1月，2020年2月.... 2021年1月，等等

Jan 2020, Feb 2020 .... Jan 2021, etc

这是我的代码:

const options = {
  title: {
    text: 'Cool title'
  },
  xAxis: {
      type: 'datetime'
    },     
  yAxis: {
                title: {
                    text: 'Interest'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
              },
              plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
},
              marker: {
              fillColor: 'transparent',
               lineColor: Highcharts.getOptions().colors[0]
          },
  series: [{

    name:kw_val1,
    data: kws1
  },
  {

    name:kw_val2,
    data: kws2
  },

  {

    name:kw_val3,
    data: kws3
  },

  {

    name:kw_val4,
    data: kws4
  },

  {

    name:kw_val5,
    data: kws5
  },


  ]
}

此时间格式有效吗?还是我需要删除时间并将其转换为其他格式?目前，它在时间戳上，我读到了它是Highchart所使用的.

Does this time format work? or Do I need to strip out the time and transform it into a different format. Currently, it's on timestamp and I read it's what Highchart uses.

更新:我在xAxis上添加了以下内容:

UPDATE: I added the following on my xAxis:

 xAxis: {
      type: 'datetime',
    labels: {
        format: '{value:%Y-%m}',
      }
    },     

但是现在x轴显示以下内容:

But now the x-axis displays the following:

如何使其显示正确的日期

How can I make it display the correct dates

推荐答案

我成功了.为绘图时遇到1970年问题的人添加答案

I made it work. Adding answer for anybody that has the 1970 problem when plotting

如果您的时间戳记为:1308909900，则要在Highcharts中获取正确的日期，您应该具有:1308909900 * 1000.

When you have timestamp like: 1308909900, to get proper dates in Highcharts, you should have: 1308909900 * 1000.

这篇关于React:如何在Highcharts中以月为单位显示正确的日期和绘图数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！