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

ecfsfe2w 于 2023-02-04 发布在 Chart.js

关注(0)|答案(1)|浏览(206)

简而言之，我有一些包含数据（y）和时间戳（t）的事件，我想在图表上显示它们。
当前，如果我有三个事件：

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

图表不会显示数据之间的差距（我指的是一个小时的差距），而是简单地将它们连接起来。
例如，在下面的示例中，10PM和5AM之间存在间隙。
如果两点之间的间隔超过X秒，是否有自动显示0值的选项？

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>

chart.js

来源：https://stackoverflow.com/questions/57470689/display-gaps-between-the-timestamps-having-no-data-in-chartjs-time-series

1条答案

按热度按时间

njthzxwz1#

由于v3 chart.js能够将spanGap设置为一个数字，从而确定要跨越的最大间隔。因此，在本例中，可以使用1小时的间隔来保持数据点的连接，但同时在晚上11点到凌晨5点之间保留一个间隔
文件：www.example.comhttps://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>

赞(0）回复(0）举报 2023-02-04

我来回答

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

1条答案

相关问题

热门标签

最新问答