charts - ChartJS : Invalid scale configuration for scale: xAxes

Question

我在 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，所以不要对那部分感到疑惑，请将其作为构建工具。

这是控制台中的错误代码，您可以看到没有应用任何轴参数(例如，x 轴标签上没有自动跳过)

我做错了什么？

Answer 1

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

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

对于您遇到的错误，在 v3 中，所有比例在比例对象中都是它们自己的对象，因此 x 不再有单独的数组。和 y轴。

有关所有更改，请阅读迁移指南:

3.x Migration Guide