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 版本从 2.7.1 更新到 3.0.0 或更高版本，在更新版本中运行良好。

请参阅下面的示例，该示例是在 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>

chart.js 用日期缩放 x 轴，奇怪的渲染器

chart.js scale xaxis with date, strange renderer

javascript

chart.js