chart.js 3 和时间轴显示错误的日期数据

Posted

技术标签:

【中文标题】chart.js 3 和时间轴显示错误的日期数据【英文标题】:chart.js 3 and time axis displays wrong date data 【发布时间】:2022-01-12 01:47:00 【问题描述】:

我很难让 chart.js 在时间轴上运行。

我有以下简化代码:

<html>
<head>


<!--
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
-->

        <script src="https://cdn.jsdelivr.net/npm/moment"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

</head>
<body>

<canvas id="chart"  ></canvas>

<script type="text/javascript">

        window.onload = function () 
        
                var ctx = document.getElementById('chart').getContext('2d');
                var myChart = new Chart(ctx,

                        type: 'line',
                        data: 
                                datasets:[ 
                                        data: [
                                                 x: '2017-01-06', y: 50 ,
                                                 x: '2017-01-15', y: 45 ,
                                                 x: '2017-03-07', y: 35 ,
                                        ]
                                 ]
                        ,
                        options: 
                                scales: 
                                        xAxes: [  type: 'time',  ] 
                                
                        
                );

        ;

</script>

</body>
</html>

当包含最新的 3.4.0 chart.js 时,时间轴的格式不正确(数据点均匀分布在 x 轴上)。但是在使用 2.9.3 版本时,显示正确(数据点均匀分布)。

小提琴不工作(使用 3.4.0):https://jsfiddle.net/ungoq8j6/1/ 小提琴工作(使用 2.9.3):https://jsfiddle.net/ungoq8j6/2/

根据文档(关于该主题的内容完全模糊),您必须包含一个日期库和一个适配器(此处为 moment.js + chartjs-adapter-moment)。

该脚本仅在客户端使用,因此没有可用的 node.js/npm。

【问题讨论】:

【参考方案1】:

您的配置错误,在 v3 中您必须定义比例的方式已更改,请阅读迁移指南:https://www.chartjs.org/docs/master/getting-started/v3-migration.html#scales

工作示例:

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/moment"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
</head>

<body>
  <canvas id="chart"  ></canvas>
  
  <script type="text/javascript">
    window.onload = function() 

      var ctx = document.getElementById('chart').getContext('2d');
      var myChart = new Chart(ctx, 

        type: 'line',
        data: 
          datasets: [
            data: [
                x: '2017-01-06',
                y: 50
              ,
              
                x: '2017-01-15',
                y: 45
              ,
              
                x: '2017-03-07',
                y: 35
              ,
            ]
          ]
        ,
        options: 
          scales: 
            x: 
              type: 'time',
            
          
        
      );

    ;
  </script>
</body>
</html>

【讨论】:

非常感谢!这按预期工作。似乎从互联网上复制 sn-ps 并不总是最好的解决方案......

以上是关于chart.js 3 和时间轴显示错误的日期数据的主要内容,如果未能解决你的问题,请参考以下文章

删除 chart.js 中的 x 轴标签/文本

Chart.js Y轴数据以百分比展示

如何在 Chart.js v2 中格式化 x 轴时间刻度值

Chart.js:禁用 Y 轴,当通过图例禁用图形时

Chart.js:在图例点击时刷新第二个Y轴步骤

Chart.js 轴标签字体大小