ChartJS 海图发行

axkjgtzd  于 2023-02-12  发布在  Chart.js
关注(0)|答案(1)|浏览(131)

正如你在下面的例子中所看到的,我的日期是从2022-11-24开始的,但是在图表中它是从2022-11-23开始的,所有其他的日期都相差了大约一天。是什么导致了这个问题?谢谢!

7uzetpgm

7uzetpgm1#

这个问题是由于本地时间与Zulu/UTC时间的时间偏移引起的。您的时区 (可能) 有一个负偏移,这就是为什么它看起来关闭了几个小时。
我的时间偏移是正的(+02:00),所以它看起来对我来说很好(图表开始于24.11或多或少)。只要在您的数据中使用localtime datetime,您就不会再遇到这个问题了。(如果您不需要/使用它,请删除时间部分-〉'2022 - 11 - 24')

    • 为了演示,我删除了日期数据集中的(Zulu)Z,以显示以下情况:**
  • (由于此更改,日期时间项现在解释为本地时间)*
let chart_dates = [
      '2022-11-24T00:00:00', '2022-11-25T00:00:00', '2022-11-26T00:00:00',
      '2022-11-27T00:00:00', '2022-11-28T00:00:00', '2022-11-29T00:00:00',
      '2022-11-30T00:00:00', ];

  let chartDataSet = [
      {"label":"A","data":[0,23,0,0,25,31,2],"lineTension":0.2,"borderColor":"#4e73df"},
      {"label":"B","data":[0,1,0,0,18,6,0],"lineTension":0.2,"borderColor":"#1cc88a"},
  ];
  
  new Chart(document.getElementById("chartJSContainer"), {
      type: 'line',
      data: {
        labels: chart_dates,
        datasets: chartDataSet
      },
      options:{
        maintainAspectRatio: false,
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'day'
            }
          }
        }
      }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>     
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
  
<div class="chart" style="height:184px;width:500px">
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</div>

相关问题