【发布时间】：2022-09-29 18:59:04
【问题描述】：
我在 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 轴标签上没有自动跳过）
我究竟做错了什么？
-
您使用的是哪个版本？