ChartJS：比例的比例配置无效：xAxes

我在 ChartJS 中遇到一个奇怪的错误，并且不知道如何修复它，由于该错误我无法更改有关比例的任何内容。

我的代码（Sensor.tsx）：

import { useParams } from "solid-app-router"
import { createSignal, createResource, onMount, createMemo, createEffect } from "solid-js";
import Chart from "chart.js/auto";

const numToSenor = {
    1: "temperature",
    2: "air_humidity",
    3: "soil_humidity",
    4: "photoresistor",
    5: "microphone",
    6: "ble",
    7: "gas",
    8: "co2",
    9: "batter_voltage",
}

let myGraph;
let chart

export const Sensor = () => {
    const params = useParams();
    const [sensortType, setSensortType] = createSignal(1);
    const [sensorData, setSensorData] = createSignal([]);
    const fetchURL = createMemo(() => `http://localhost:1234/sensor/${params.id}/${numToSenor[sensortType()]}`)
    
    createEffect(() => {
        fetch(`http://localhost:1234/sensor/${params.id}/${numToSenor[sensortType()]}`)
        .then(raw => raw.json())
        .then(data => setSensorData(data));

    })
    onMount(() => {
        let canvas = myGraph.getContext("2d")
        chart = new Chart(canvas, {
         type: 'line',
         data: {
            datasets: [{ 
                  data: sensorData(),
                  label: "Temperature",
                  borderColor: "#3e95cd",
                  fill: false
            }]
         },
         options: {
            responsive: true,
            legend: {
               display: false
            },
            tooltips: {
               mode: "index",
               intersect: false,
            },
            hover: {
               mode: "nearest",
               intersect: true
            },
            scales: {
                xAxes: [{
                  type: "time",
                  ticks: {
                    autoSkip: true,
                    maxTicksLimit: 20,
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: "Point"
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: "Value"
                    }
                }]
            }
         }
      })
    })
    createEffect(() => {
        chart.data = {
            datasets: [{ 
                  data: sensorData(),
                  label: "Temperature",
                  borderColor: "#3e95cd",
                  fill: false
            }]
         }
         chart.update();
    })

    

    return (
        <>
        <div class='w-full wp-2 overflow-y-auto h-screen' >
            {/* Header */}
            <div  class=" bg-slate-50 duration-200 m-6 p-2 border-b-3 border-light rounded-md flex ">
                SensorID: {params.id}
            </div>
            
            {/* Data Graph Picker */}
            <div class="flex mx-6 mt-12">
                <div onClick={() => setSensortType(1)} class={`${sensortType() == 1 ? "border-slate-400" : "border-light"} bg-slate-50 duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    Temperature
                </div>
                <div onClick={() => setSensortType(2)} class={`${sensortType() == 2 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    Air Humidity
                </div>
                <div onClick={() => setSensortType(3)} class={`${sensortType() == 3 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    Soil Humidity
                </div>
                <div onClick={() => setSensortType(4)} class={`${sensortType() == 4 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    Brightness
                </div>
                <div onClick={() => setSensortType(5)} class={`${sensortType() == 5 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    Loudness
                </div>
                <div onClick={() => setSensortType(6)} class={`${sensortType() == 6 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    BLE
                </div>
                <div onClick={() => setSensortType(7)} class={`${sensortType() == 7 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    Gas
                </div>
                <div onClick={() => setSensortType(8)} class={`${sensortType() == 8 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                     CO2
                </div>
                <div onClick={() => setSensortType(9)} class={`${sensortType() == 9 ? "border-slate-400" : "border-light"} bg-slate-50  duration-200 mr-4 p-2 border-b-3  rounded-md flex hover:bg-slate-200`}>
                    Battery Voltage
                </div>
            </div>

            {/* Data Graph */}
            <div class=" block bg-slate-50 duration-200 m-6 mt-2 p-2 border-b-3 border-light rounded-md ">
                {numToSenor[sensortType()]}
                <canvas ref={myGraph}></canvas>
            </div>
        </div>
        </>
    )
}

我使用 SolidJS，所以不要担心这部分，并将 vite 作为构建工具。

Here are the error codes in the console,as you can see none of the axis parameters were apllied (for example no autoSkip on the x-axis labels)

我究竟做错了什么？

您正在使用 Chart.js 的 V3，同时对所有选项使用 V2 语法。

例如，工具提示和图例应在插件的命名空间中配置。

对于您收到的错误，在 v3 中，所有比例尺对象中的所有比例尺都是它们自己的对象，因此不再需要单独的数组x and y axes.

对于所有更改，请阅读迁移指南：

3.x 迁移指南