显示 ChartJS 时间序列中没有数据的时间戳之间的差距

Question

简而言之，我有包含数据 ( y) 和时间戳 ( t) 的事件，我想在图表上显示它们。

目前，如果我有三个事件：

• 10:00 AM: 42
• 11:00 AM: 43
• 11:20 AM: 44

该图表不会显示数据之间存在差距（我指的是一小时的差距），而只是将它们连接起来。

例如，在以下示例中，晚上 10 点和早上 5 点之间存在间隔。

0如果两点之间的差距超过X秒，是否有自动显示值的选项？

var ctx = document.getElementById('chart').getContext("2d");

var data = [
  {
    "y": "0.58",
    "t": 1565665819571
  },
  {
    "y": "0.84",
    "t": 1565665218436
  },
  {
    "y": "1.69",
    "t": 1565664625228
  },
  {
    "y": "0.24",
    "t": 1565640019245
  },
  {
    "y": "0.24",
    "t": 1565639418937
  },
  {
    "y": "0.25",
    "t": 1565638819713
  },
  {
    "y": "0.25",
    "t": 1565638219190
  },
  {
    "y": "0.23",
    "t": 1565637619961
  },
  {
    "y": "0.24",
    "t": 1565637018574
  },
  {
    "y": "0.24",
    "t": 1565636426432
  },
  {
    "y": "0.24",
    "t": 1565635825187
  },
  {
    "y": "0.25",
    "t": 1565635218607
  },
  {
    "y": "0.25",
    "t": 1565634618853
  },
  {
    "y": "0.26",
    "t": 1565634020604
  },
  {
    "y": "0.26",
    "t": 1565633419088
  },
  {
    "y": "0.27",
    "t": 1565632819216
  },
  {
    "y": "0.27",
    "t": 1565632218830
  },
  {
    "y": "0.28",
    "t": 1565631620692
  },
  {
    "y": "0.29",
    "t": 1565631019620
  },
  {
    "y": "0.29",
    "t": 1565630418738
  },
  {
    "y": "0.30",
    "t": 1565629818050
  },
  {
    "y": "0.31",
    "t": 1565629218872
  },
  {
    "y": "0.33",
    "t": 1565628126871
  }
]

var chart = new Chart(ctx, {
  "type": "line",
  "data": {
    "datasets": [
      {
        "label": "Foo",
        "backgroundColor": "lightblue",
        "borderColor": "blue",
        "data": data,
        "type": "line",
        "pointRadius": 0,
        "fill": false,
        "lineTension": 0,
        "borderWidth": 2,
        "spanGaps": false
      }
    ]
  },
  "options": {
    "scales": {
      "xAxes": [
        {
          "type": "time",
          "distribution": "series",
          "ticks": {
            "source": "data",
            "autoSkip": true
          }
        }
      ],
      "yAxes": [
        {
          "scaleLabel": {
            "display": true,
            "labelString": "Y"
          }
        }
      ]
    },
    "tooltips": {
      "intersect": false,
      "mode": "index",
      "callbacks": {}
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

Answer 1

由于 v3 Chart.js 能够将 spanGap 设置为数字，从而确定要跨越的最大间隙。因此，在这种情况下，可以使用 1 小时的间隙来保持数据点连接，但同时在晚上 11 点和凌晨 5 点之间有一个间隙

文档：https ://www.chartjs.org/docs/latest/charts/line.html#line-styling

官方示例：https ://www.chartjs.org/docs/latest/samples/scales/time-max-span.html

这是调整后的代码：

const ctx = document.getElementById('chart');

const data = [{
    "y": "0.58",
    "x": 1565665819571,
  },
  {
    "y": "0.84",
    "x": 1565665218436,
  },
  {
    "y": "1.69",
    "x": 1565664625228
  },
  {
    "y": "0.24",
    "x": 1565640019245
  },
  {
    "y": "0.24",
    "x": 1565639418937
  },
  {
    "y": "0.25",
    "x": 1565638819713
  },
  {
    "y": "0.25",
    "x": 1565638219190
  },
  {
    "y": "0.23",
    "x": 1565637619961
  },
  {
    "y": "0.24",
    "x": 1565637018574
  },
  {
    "y": "0.24",
    "x": 1565636426432
  },
  {
    "y": "0.24",
    "x": 1565635825187
  },
  {
    "y": "0.25",
    "x": 1565635218607
  },
  {
    "y": "0.25",
    "x": 1565634618853
  },
  {
    "y": "0.26",
    "x": 1565634020604
  },
  {
    "y": "0.26",
    "x": 1565633419088
  },
  {
    "y": "0.27",
    "x": 1565632819216
  },
  {
    "y": "0.27",
    "x": 1565632218830
  },
  {
    "y": "0.28",
    "x": 1565631620692
  },
  {
    "y": "0.29",
    "x": 1565631019620
  },
  {
    "y": "0.29",
    "x": 1565630418738
  },
  {
    "y": "0.30",
    "x": 1565629818050
  },
  {
    "y": "0.31",
    "x": 1565629218872
  },
  {
    "y": "0.33",
    "x": 1565628126871
  }

]

const chart = new Chart(ctx, {
  "type": "line",
  "data": {
    datasets: [{
      label: 'Foo',
      backgroundColor: "lightblue",
      borderColor: "blue",
      fill: false,
      data: data,
      pointRadius: 0,
      spanGaps: 1000 * 60 * 60, // 1 hour
    }]
  },
  options: {
    responsive: true,
    scales: {
      xAxis: {
        type: "time"
      }
    },
    "tooltips": {
      "intersect": false,
      "mode": "index",
      "callbacks": {}
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
<canvas id="chart"></canvas>