chart.js 用日期縮放 xaxis，奇怪的渲染器

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 */

我用這個 function 生成我的圖表，我不明白如何解決我的問題謝謝你的幫助

 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>