需要在x轴上显示日期的图表上显示数据
数据如下:
const data = {
datasets: [
{
label: "Fe",
borderColor: "Red",
backgroundColor: "Red",
showLine: true,
hidden: true,
data: [
{
x: "2/1/2021",
y: 1,
elementHover: "Fe 1 26726 2/1/2021 12:00:00 AM 20210205100603",
},
{
x: "5/27/2021",
y: 2,
elementHover: "Fe 2 27650 5/27/2021 12:00:00 PM 20210601100803",
},
{
x: "4/3/2022",
y: 4,
elementHover: "Fe 4 24667 4/3/2022 12:00:00 PM 20220405101102",
},
{
x: "6/5/2022",
y: 4,
elementHover: "Fe 4 25126 6/5/2022 12:00:00 PM 20220613101104",
},
{
x: "7/28/2022",
y: 3,
elementHover: "Fe 3 25554 7/28/2022 12:00:00 PM 20220804100105",
},
{
x: "9/14/2022",
y: 3,
elementHover: "Fe 3 25990 9/14/2022 12:00:00 PM 20220927100604",
},
],
},
],
};
图表选项:
var timeFormat = "MM/dd/yyyy";
const [options, setOptions] = useState({
elements: {
pointStyle: "cross",
},
scales: {
xAxes: [
{
type: "time",
time: {
format: timeFormat,
tooltipFormat: "ll",
},
displayFormats: {
year: "MM/yy/ddd",
},
scaleLabel: {
display: true,
labelString: "Date",
},
},
],
},
plugins: {
datalabels: {
display: false,
color: "black",
align: "top",
formatter: function (value, context) {
return value.y;
},
},
legend: {
position: "right",
align: "center",
labels: {
boxWidth: 10,
pointStyle: "cross",
},
},
tooltip: {
callbacks: {
label: function (context) {
return context.raw.elementHover;
},
title: function (context) {
return "";
},
},
},
},
});
图表:
<Grid item xs={12}>
{chartData && (
<Scatter
ref={chartReference}
style={{ width: "60%", height: "60%" }}
type="Scatter"
data={data}
options={options}
/>
)}
</Grid>
控制台:
Invalid configuration for scale: xAxis
1条答案
按热度按时间ctrmrzij1#
结果是缺少了“chartjs-adapter-moment”。把它添加到项目中,它工作了。