带有日期 xAxes 的散点图 react-chratjs-2

Question

我正在尝试实现一个具有分散日期属性的图形，但图表正在呈现彼此之间具有相同距离的所有日期。

{
    "ndvi values": [
        0.1158,
        0.1975,
        0.1913,
        0.2137,
        0.1603,
        0.13,
        0.246,
        0.249,
        0.1955,
        0.124,
        0.1854,
        0.2721,
        0.2095,
        0.1357,
        0.2444
    ],
    "Julian dates": [
        2458208.0,
        2458386.0,
        2458476.0,
        2458566.0,
        2458653.0,
        2458746.0,
        2458836.0,
        2458921.0,
        2459026.0,
        2459111.0,
        2458391.0,
        2458476.0,
        2458566.0,
        2458746.0,
        2458836.0
    ]
}

这是我从后端api获取的json数据，日期数组是这样的[2018/2/12、2018/218、2018/5/19、2019/1/1]。如您所见，日期以正确且升序的方式排序。有没有办法根据我们拥有的数据使图形步骤更合乎逻辑？

Answer 1

您应该将 x 轴定义为时间笛卡尔轴，并将数据作为单独的点提供，其中每个元素都有 at和 ay属性（另请参阅此答案）。使用Array.map()，可以按如下方式完成：

data['Julian dates']
  .map((d, i) => ({ t: julianIntToDate(d), y: data['ndvi values'][i] }))

请注意，我在这个答案中使用Stephane BOISSEAUjulianIntToDate提供的函数将儒略日期转换为常规日期。

请查看下面的可运行代码并了解它是如何工作的。虽然这是纯 JavaScript，但应该很容易使其也可以与react-chartjs-2.

data['Julian dates']
  .map((d, i) => ({ t: julianIntToDate(d), y: data['ndvi values'][i] }))

const data = {
  'ndvi values': [0.1158, 0.1975, 0.1913, 0.2137, 0.1603, 0.13, 0.246, 0.249, 0.1955, 0.124, 0.1854, 0.2721, 0.2095, 0.1357, 0.2444],
  'Julian dates': [2458208.0, 2458386.0, 2458476.0, 2458566.0, 2458653.0, 2458746.0, 2458836.0, 2458921.0, 2459026.0, 2459111.0, 2458391.0, 2458476.0, 2458566.0, 2458746.0, 2458836.0]
};

// convert a Julian number to a Gregorian Date (S.Boisseau / BubblingApp.com / 2014)
function julianIntToDate(n) {   
    var a = n + 32044;
    var b = Math.floor(((4*a) + 3)/146097);
    var c = a - Math.floor((146097*b)/4);
    var d = Math.floor(((4*c) + 3)/1461);
    var e = c - Math.floor((1461 * d)/4);
    var f = Math.floor(((5*e) + 2)/153);

    var D = e + 1 - Math.floor(((153*f) + 2)/5);
    var M = f + 3 - 12 - Math.round(f/10);
    var Y = (100*b) + d - 4800 + Math.floor(f/10);
    return new Date(Y,M,D);
}

new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'ndvi values',
      data: data['Julian dates'].map((d, i) => ({ t: julianIntToDate(d), y: data['ndvi values'][i] })),
      borderColor: 'blue',
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month',
          displayFormats: {
            month: 'YYYY/M'
          },
          tooltipFormat: 'YYYY/M/D'
        }
      }]
    }
  }
});