如何在 react-chartjs-2 X 轴中显示特定时间段的所有日期
How to display all the days of a particular time period in react-chartjs-2 X-axes
我有一个图表需要显示特定月份的数据。例如,X 轴应该以今天结束。它应该从一个月前开始。并且应显示该时间段内的所有日期。现在,从那个月的1号开始。
预期结果。
结束日期 - 今天(5 月 5 日)
开始日期 - 一个月前(4 月 4 日)
但是从4月1日开始。
//code
import React, { Component } from 'react';
import moment from 'moment';
import { Line } from 'react-chartjs-2';
export default class LineChart extends Component {
state = {
starting: moment().subtract(1, 'month').format('MMM DD'),
ending: moment().format('MMM DD'),
data: [
{
x: new Date(),
y: 1,
},
{
t: new Date(),
y: 10,
},
],
};
render() {
var startDate = moment().subtract(1, 'months').format('MMM DD');
var endDate = moment().format('MMM DD');
const data = {
labels: [startDate, endDate],
datasets: [
{
label: 'NPS Score',
fill: false,
lineTension: 0.2,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderDash: [],
borderDashOffset: 0.0,
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: this.state.data,
},
],
};
const lineOptions = {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'lll',
},
ticks: {
maxTicksLimit: 12,
},
},
],
yAxes: [
{
stacked: true,
gridLines: {
display: false,
},
ticks: {
suggestedMin: 100,
suggestedMax: 0,
},
},
],
},
legend: {
display: false,
},
tooltips: {
enabled: true,
},
};
return <Line data={data} options={lineOptions} height={120} />;
}
}
这是我在堆栈闪电战中的代码 - https://stackblitz.com/edit/line-chart-with-time-on-xaxes
谁能帮我这个?提前致谢。
你必须在 moment js 中使用正确的格式。这是编辑后的代码。
var startDate = moment().subtract(1, 'months').format('YYYY-MM-DD');
var endDate = moment().format('YYYY-MM-DD');
const data = {
labels: [startDate, endDate],
//rest of the code
}
请注意,图表 js 显示的日期包括月份和日期。例如。 "May 06"
我有一个图表需要显示特定月份的数据。例如,X 轴应该以今天结束。它应该从一个月前开始。并且应显示该时间段内的所有日期。现在,从那个月的1号开始。
预期结果。 结束日期 - 今天(5 月 5 日) 开始日期 - 一个月前(4 月 4 日) 但是从4月1日开始。
//code
import React, { Component } from 'react';
import moment from 'moment';
import { Line } from 'react-chartjs-2';
export default class LineChart extends Component {
state = {
starting: moment().subtract(1, 'month').format('MMM DD'),
ending: moment().format('MMM DD'),
data: [
{
x: new Date(),
y: 1,
},
{
t: new Date(),
y: 10,
},
],
};
render() {
var startDate = moment().subtract(1, 'months').format('MMM DD');
var endDate = moment().format('MMM DD');
const data = {
labels: [startDate, endDate],
datasets: [
{
label: 'NPS Score',
fill: false,
lineTension: 0.2,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderDash: [],
borderDashOffset: 0.0,
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: this.state.data,
},
],
};
const lineOptions = {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'lll',
},
ticks: {
maxTicksLimit: 12,
},
},
],
yAxes: [
{
stacked: true,
gridLines: {
display: false,
},
ticks: {
suggestedMin: 100,
suggestedMax: 0,
},
},
],
},
legend: {
display: false,
},
tooltips: {
enabled: true,
},
};
return <Line data={data} options={lineOptions} height={120} />;
}
}
这是我在堆栈闪电战中的代码 - https://stackblitz.com/edit/line-chart-with-time-on-xaxes 谁能帮我这个?提前致谢。
你必须在 moment js 中使用正确的格式。这是编辑后的代码。
var startDate = moment().subtract(1, 'months').format('YYYY-MM-DD');
var endDate = moment().format('YYYY-MM-DD');
const data = {
labels: [startDate, endDate],
//rest of the code
}
请注意,图表 js 显示的日期包括月份和日期。例如。 "May 06"