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

问题描述

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

{
    "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,2458836.0
    ]
}

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

解决方法

您应该将 x 轴定义为 time cartesian axis 并将数据提供为 individual points，其中每个元素都有一个 t 和一个 y 属性（还需要一个看看这个answer）。使用 Array.map()，可以按如下方式完成：

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

请注意，我在此 Stephane BOISSEAU 中使用 answer 提供的 julianIntToDate 函数将儒略日期转换为常规日期。

请看一下下面的可运行代码，看看它是如何工作的。虽然这是普通的 JavaScript，但让它也能与 react-chartjs-2 一起使用应该很容易。

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,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,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'
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>

,

试试这个库：Chart.Scatter/

它是 chart.js 的附加组件，可以帮助您。