带有日期的chart.js刻度X轴，奇怪的渲染器

Question

嗨，我在chart.js上有这个配置的渲染器，我不明白为什么

​

​

这是chart.js的版本

​

/*!
 * Chart.js
 * http://chartjs.org/
 * Version: 2.7.1
 *
 * Copyright 2017 Nick Downie
 * Released under the MIT license
 * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
 */

​

我用这个函数生成我的图表，我不知道如何解决我的问题，谢谢你的帮助。

​

new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            labels: datadate,
            datasets: [{ 
                data: datavalue,
                label: "Value array",
                borderColor: "#3e95cd",
                pointRadius: 3,
                pointHoverRadius: 3,
                fill: false
                }
            ]
        },
        options: {
                title: {
                display: true,
                text: 'returned value'
                },
                
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false
                        }
                    }],
                    xAxes: [ {
                        type: 'time',
                       time: {
                        min: Math.min.apply(null, datadate),
                        max: Math.max.apply(null, datadate)
                       }
                    }],
                },
                responsive: true
        }
    });

​

Answer 1

将您的Chart.js版本更新为3.0.0或更高版本，而不是2.7.1，在更新版本中运行良好。

请参阅下面的示例，该示例是在Chart.js版本3.0.0上生成的。

注意事项：下面是一个简单的线条图示例。

​

const ctx = document.getElementById("tests-chart");
const data =[
  { x: "24/03/2022", y: 20 },
  { x: "25/03/2022", y: 5 },
  { x: "24/06/2022", y: 10 },
  { x: "25/06/2022", y: 5 }
 ];

const testsChart = new Chart(document.getElementById("tests-chart"), {
        type: 'line',
        data: {
            datasets: [{ 
                data: data,
                label: "Value array",
                borderColor: "#3e95cd",
                pointRadius: 3,
                pointHoverRadius: 3,
                fill: false
                }
            ]
        },
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.min.js"></script>
<div>
  <canvas id="tests-chart"></canvas>
</div>

​