chartjs linechart shifting by a day答案

【问题标题】：chartjs linechart issuechartjs linechart shifting by a day
【发布时间】：2022-12-01 18:32:12
【问题描述】：

As you can see in the example below, my dates are starting at 2022-11-24, however in chart it starts from 2022-11-23, and all rest of dates get shifted by about a day. What's causing this issue ? Thanks !

let chart_dates = ['2022-11-24T00:00:00Z', '2022-11-25T00:00:00Z', '2022-11-26T00:00:00Z', '2022-11-27T00:00:00Z', '2022-11-28T00:00:00Z', '2022-11-29T00:00:00Z', '2022-11-30T00:00:00Z'];
        
        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:{
            scales: {
              x: {
                type: 'time',
                time: {
                  unit: 'day'
                }
              }
            }
          }
        });

     <body>
              <canvas id="chartJSContainer" width="600" height="400"></canvas>
              <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>
       </body>

【问题讨论】：

Your chart starts at the 24, I don't see any issue
@LeeLenalee Why does the point of interaction shift ? For examle it shows Nov 24 count as 23 for dataset A , but that line interaction is closer to date 25th.
Date Nov 25th has data as 23 , but that shows for Nov 24.
@LeeLenalee i.imgur.com/azRFW6I.png
Please add a reproducaible sample because the code you linked works fine if you run it imgur.com/a/7Q6nEKE

标签： chart.js

【解决方案1】：

The problem is probally due to you current timeofset to Zulu Time. Your timezone has (probably) a negative offset.

My time offset is positive (+02:00),so it looks fine for me (chart begins at 24.11). Just use localtime Dates in your data than you should not have this issue

Just for demo I remove the (Zulu) Z in the date dataset, to show case this:
(Due to this change, the Datetime items are now interpreted as localtime)

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>

【讨论】：