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 作为构建工具。

这是控制台中的错误代码,您可以看到没有应用任何轴参数(例如 x 轴标签上没有 autoSkip) [enter image description here ](https://i.stack.imgur.com/ 5WY7h.jpg)

我究竟做错了什么?

stack overflow ChartJS: Invalid scale configuration for scale: xAxes
原文答案
author avatar

接受的答案

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

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

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

对于所有更改,请阅读迁移指南:

3.x Migration Guide


答案: