chartjs 无法正确呈现日期
chartjs doesn't render dates properly
我在 reactjs 中制作了一个自定义 chartjs 组件,并希望在 xAxes 中呈现日期,在 yAxes 中呈现从 -1 到 1 的数字,但它以不正确的方式呈现数据。
import React, { useRef, useEffect } from "react";
import Chart from "chart.js";
const ChartComponent = ({ data, label, min, max }) => {
const canvasRef = useRef(null);
useEffect(() => {
const canvasObj = canvasRef.current;
const context = canvasObj.getContext("2d");
new Chart(context, {
type: "line",
data: {
datasets: [
{
label: label,
backgroundColor: "transparent",
data: data,
},
],
},
options: {
scales: {
xAxes: [
{
type: "time",
distribution: "linear",
time: {
unit: "month",
displayFormats: {
quarter: "YYYY mm dd",
},
},
},
],
yAxes: [
{
ticks: {
suggestedMax: max,
suggestedMin: min,
},
},
],
},
},
});
}, [data, label, min, max]);
return <canvas ref={canvasRef}> </canvas>;
};
export default ChartComponent;
我正在将这样的数据传递给组件
<ChartComponent
min={-1}
max={1}
label="date"
data={[
{
x: "30/03/2018",
y: 0.1158,
},
{
x: "24/09/2018",
y: 0.1975,
},
{
x: "23/12/2018",
y: 0.1913,
},
{
x: "23/03/2019",
y: 0.2137,
},
]}
/>;
我不得不提一下,我也做过同样的事情,而且工作正常这是下面的例子
<ChartComponent
min={1270}
max={1272}
label=" مساحت دریاچه"
data={[
{
x: "04/02/2017",
y: 1270.7,
},
{
x: "06/26/2017",
y: 1270.74,
},
{
x: "09/19/2017",
y: 1270.31,
},
{
x: "12/18/2017",
y: 1270.28,
},
{
x: "06/16/2018",
y: 1270.81,
},
{
x: "09/24/2018",
y: 1270.27,
},
{
x: "12/23/2018",
y: 1270.54,
},
{
x: "05/25/2019",
y: 1271.94,
},
{
x: "06/18/2019",
y: 1271.84,
},
{
x: "09/19/2019",
y: 1271.31,
},
{
x: "12/18/2019",
y: 1271.25,
},
{
x: "03/12/2020",
y: 1271.48,
},
{
x: "06/25/2020",
y: 1271.72,
},
]}
/>;
如有任何建议,我们将不胜感激。谢谢。
问题是您提供的日期字符串不是 ISO 08601 nor RFC 2822 Date time format, hence they cannot be parsed by Moment.js 的日期字符串,Chart.js 内部使用了它。
要使其工作,您必须定义 xAxes.time.parser: "DD.MM.YYYY"
。
请查看下面的可运行代码,看看它是如何工作的。这是纯粹的 JavaScript 示例,但它也应该适用于 react-chartjs-2
.
new Chart("myChart", {
type: "line",
data: {
datasets: [{
label: 'My Dataset',
data: [
{ x: "30/03/2018", y: 0.1158 },
{ x: "24/09/2018", y: -0.1975 },
{ x: "23/12/2018", y: 0.1913 },
{ x: "23/03/2019", y: -0.2137 }
],
fill: false
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
parser: "DD.MM.YYYY",
unit: "month",
displayFormats: {
month: "YYYY MM DD",
}
}
}],
yAxes: [{
ticks: {
suggestedMax: 1,
suggestedMin: -1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart" height="100"></canvas>
As I already mentioned, Chart.js internally uses Moment.js for the functionality of the time axis. Therefore make sure to use the bundled version of Chart.js that includes Moment.js in a single file.
我在 reactjs 中制作了一个自定义 chartjs 组件,并希望在 xAxes 中呈现日期,在 yAxes 中呈现从 -1 到 1 的数字,但它以不正确的方式呈现数据。
import React, { useRef, useEffect } from "react";
import Chart from "chart.js";
const ChartComponent = ({ data, label, min, max }) => {
const canvasRef = useRef(null);
useEffect(() => {
const canvasObj = canvasRef.current;
const context = canvasObj.getContext("2d");
new Chart(context, {
type: "line",
data: {
datasets: [
{
label: label,
backgroundColor: "transparent",
data: data,
},
],
},
options: {
scales: {
xAxes: [
{
type: "time",
distribution: "linear",
time: {
unit: "month",
displayFormats: {
quarter: "YYYY mm dd",
},
},
},
],
yAxes: [
{
ticks: {
suggestedMax: max,
suggestedMin: min,
},
},
],
},
},
});
}, [data, label, min, max]);
return <canvas ref={canvasRef}> </canvas>;
};
export default ChartComponent;
我正在将这样的数据传递给组件
<ChartComponent
min={-1}
max={1}
label="date"
data={[
{
x: "30/03/2018",
y: 0.1158,
},
{
x: "24/09/2018",
y: 0.1975,
},
{
x: "23/12/2018",
y: 0.1913,
},
{
x: "23/03/2019",
y: 0.2137,
},
]}
/>;
我不得不提一下,我也做过同样的事情,而且工作正常这是下面的例子
<ChartComponent
min={1270}
max={1272}
label=" مساحت دریاچه"
data={[
{
x: "04/02/2017",
y: 1270.7,
},
{
x: "06/26/2017",
y: 1270.74,
},
{
x: "09/19/2017",
y: 1270.31,
},
{
x: "12/18/2017",
y: 1270.28,
},
{
x: "06/16/2018",
y: 1270.81,
},
{
x: "09/24/2018",
y: 1270.27,
},
{
x: "12/23/2018",
y: 1270.54,
},
{
x: "05/25/2019",
y: 1271.94,
},
{
x: "06/18/2019",
y: 1271.84,
},
{
x: "09/19/2019",
y: 1271.31,
},
{
x: "12/18/2019",
y: 1271.25,
},
{
x: "03/12/2020",
y: 1271.48,
},
{
x: "06/25/2020",
y: 1271.72,
},
]}
/>;
如有任何建议,我们将不胜感激。谢谢。
问题是您提供的日期字符串不是 ISO 08601 nor RFC 2822 Date time format, hence they cannot be parsed by Moment.js 的日期字符串,Chart.js 内部使用了它。
要使其工作,您必须定义 xAxes.time.parser: "DD.MM.YYYY"
。
请查看下面的可运行代码,看看它是如何工作的。这是纯粹的 JavaScript 示例,但它也应该适用于 react-chartjs-2
.
new Chart("myChart", {
type: "line",
data: {
datasets: [{
label: 'My Dataset',
data: [
{ x: "30/03/2018", y: 0.1158 },
{ x: "24/09/2018", y: -0.1975 },
{ x: "23/12/2018", y: 0.1913 },
{ x: "23/03/2019", y: -0.2137 }
],
fill: false
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
parser: "DD.MM.YYYY",
unit: "month",
displayFormats: {
month: "YYYY MM DD",
}
}
}],
yAxes: [{
ticks: {
suggestedMax: 1,
suggestedMin: -1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart" height="100"></canvas>
As I already mentioned, Chart.js internally uses Moment.js for the functionality of the time axis. Therefore make sure to use the bundled version of Chart.js that includes Moment.js in a single file.