Как отобразить все дни определенного периода времени на React-Chart js -2 оси X - PullRequest
Новая
       18

Как отобразить все дни определенного периода времени на React-Chart js -2 оси X

1 голос
/ 05 мая 2020

У меня есть график, на котором должны отображаться данные за определенный месяц. Например, оси X должны заканчиваться сегодняшним днем. И это должно начинаться с месяца go. и должны отображаться все даты за этот период времени. Прямо сейчас, это начинается с 1 числа этого месяца.

Ожидаемый результат. Дата окончания - сегодня (5 мая) Дата начала - месяц a go (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 Кто-нибудь может мне с этим помочь? Заранее спасибо.

1 Ответ

1 голос
/ 06 мая 2020

Вы должны использовать правильный формат с моментом 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 показывает дату с указанием месяца и дня. Например, «06 мая»

...