如何解决chartjs 无法正确呈现日期
我在 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,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 也不是RFC 2822 Date time format,因此它们不能是parsed 的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>
正如我已经提到的,Chart.js 在内部使用 Moment.js 来实现 time axis 的功能。因此,请确保使用 Chart.js 的 bundled version,在单个文件中包含 Moment.js。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。