如何处理不规则时间序列图表

Question

我有一些从 api 获取的数据并将其绘制成图表。 这是数据样本

[
    {
        "id": 10516560,
        "username": "acrawford69",
        "avatar_url": "https://a.ppy.sh/10516560?1661994504.png",
        "country_code": "US",
        "country": {
            "code": "US",
            "name": "United States"
        },
        "cover_url": "https://assets.ppy.sh/user-profile-covers/10516560/a48a1388412e00cb53f63a18c988460f3a823bc59abfbca57dc0f3178518f828.jpeg",
        "playstyle": [
            "keyboard",
            "tablet"
        ],
        "stats": [
            {
                "count300": 125059,
                "count100": 26906,
                "count50": 5572,
                "playcount": 1492,
                "ranked_score": "103758885",
                "total_score": "351690963",
                "pp_rank": 483837,
                "level": 37.7535,
                "pp_raw": 376.591,
                "accuracy": 90.7366943359375,
                "count_rank_ss": 2,
                "count_rank_s": 40,
                "count_rank_a": 60,
                "timestamp": "2018-01-01T14:05:19Z"
            },
            {
                "count300": 1402229,
                "count100": 222088,
                "count50": 23084,
                "playcount": 13221,
                "ranked_score": "1270502397",
                "total_score": "5646827189",
                "pp_rank": 113169,
                "level": 92.9875,
                "pp_raw": 2119.61,
                "accuracy": 95.52465057373047,
                "count_rank_ss": 21,
                "count_rank_s": 244,
                "count_rank_a": 315,
                "timestamp": "2018-04-19T10:39:30Z"
            },
            {
                "count300": 2790003,
                "count100": 402271,
                "count50": 36326,
                "playcount": 23752,
                "ranked_score": "2276685904",
                "total_score": "12164504933",
                "pp_rank": 54358,
                "level": 97.8885,
                "pp_raw": 3174.39,
                "accuracy": 95.93881225585938,
                "count_rank_ss": 24,
                "count_rank_s": 333,
                "count_rank_a": 467,
                "timestamp": "2018-07-12T15:55:55Z"
            },
                        {
                "count300": 3247631,
                "count100": 476426,
                "count50": 42776,
                "playcount": 27152,
                "ranked_score": "2524961796",
                "total_score": "14635199169",
                "pp_rank": 47794,
                "level": 98.4106,
                "pp_raw": 3403.8,
                "accuracy": 95.63449096679688,
                "count_rank_ss": 26,
                "count_rank_s": 347,
                "count_rank_a": 491,
                "timestamp": "2018-07-30T16:01:46Z"
            }
        ]
    },
    {
        "id": 9683580,
        "username": "Vynxica",
        "avatar_url": "https://a.ppy.sh/9683580?1671751072.jpeg",
        "country_code": "HR",
        "country": {
            "code": "HR",
            "name": "Croatia"
        },
        "cover_url": "https://assets.ppy.sh/user-profile-covers/9683580/97a293b985f6fb3764559f579dccfdd23aa43596d36efadcfdacfbca917dc0d8.gif",
        "playstyle": [
            "keyboard",
            "tablet"
        ],
        "stats": [
            {
                "count300": 1145788,
                "count100": 131699,
                "count50": 10432,
                "playcount": 11833,
                "ranked_score": "917770565",
                "total_score": "5786130619",
                "pp_rank": 93095,
                "level": 93.308,
                "pp_raw": 2391.06,
                "accuracy": 97.15504455566406,
                "count_rank_ss": 13,
                "count_rank_s": 142,
                "count_rank_a": 140,
                "timestamp": "2018-04-15T19:10:20Z"
            },
            {
                "count300": 1167625,
                "count100": 133033,
                "count50": 10455,
                "playcount": 12002,
                "ranked_score": "931440095",
                "total_score": "5939756779",
                "pp_rank": 91215,
                "level": 93.6577,
                "pp_raw": 2429.73,
                "accuracy": 97.23928833007812,
                "count_rank_ss": 13,
                "count_rank_s": 147,
                "count_rank_a": 138,
                "timestamp": "2018-04-17T20:40:28Z"
            },
            {
                "count300": 1285778,
                "count100": 142285,
                "count50": 10715,
                "playcount": 13141,
                "ranked_score": "984832452",
                "total_score": "6614981180",
                "pp_rank": 83540,
                "level": 94.8007,
                "pp_raw": 2578.79,
                "accuracy": 97.06028747558594,
                "count_rank_ss": 13,
                "count_rank_s": 162,
                "count_rank_a": 138,
                "timestamp": "2018-05-04T09:35:20Z"
            },
            {
                "count300": 1418779,
                "count100": 153004,
                "count50": 11125,
                "playcount": 14369,
                "ranked_score": "1067690803",
                "total_score": "7441652978",
                "pp_rank": 65121,
                "level": 95.6683,
                "pp_raw": 2751.09,
                "accuracy": 97.38233184814453,
                "count_rank_ss": 13,
                "count_rank_s": 166,
                "count_rank_a": 150,
                "timestamp": "2018-05-19T19:48:10Z"
            },
        ]
    }

我可以让它很好地绘制图表，但我想让它在查看数据时，工具提示显示最近点的数据，即使它很远。 我愿意更换图表库，目前我使用的是echarts。

我尝试编写一个自定义工具提示函数来搜索每行上最接近的值并显示它，但我无法让它工作。完全没有。

Answer 1

我做了一个小示例来说明如何在echarts中完成它。根据您的数据提供给系列的方式，您可能需要进行一些小的更改。目前，最接近的 x 值被视为最近点。另外，格式非常简单，但我希望你可以从这里开始。

代码：

option = {
  xAxis: {},
  yAxis: {},
  tooltip: {
    formatter: getNearest,
  },
  series: [
    {
      data: [[0,820], [1,932], [3,901], [5,934], [7,1290], [9,1330], [12,1320]],
      type: 'line',
      smooth: true
    },
    {
      data: [[0,367], [2,790], [4,905], [6,409], [8,1290], [10,1330], [12,504]],
      type: 'line',
      smooth: true
    }
  ]
};

function getNearest(params) {
  const seriesIndex = params.seriesIndex;
  const xValue = params.value[0];
  let curOption = myChart.getOption();
  let result = "<div>" + params.value[0] + " " + params.value[1] + "</div>";
  
  for (let index in curOption.series) {
    if (index == seriesIndex) {
      continue;
    }
    
    const series = curOption.series[index];
    let nearestX = Infinity;
    let nearestY;
    for (let datapoint of series.data) {
      if (Math.abs(datapoint[0] - xValue) <= Math.abs(nearestX - xValue)) {
        nearestX = datapoint[0];
        nearestY = datapoint[1];
      }
    }
    result += "<div>" + nearestX + " " + nearestY + "</div>"
  }
  
  return result;
}