Блог

у меня есть диаграммы chartjs, которые отображают формат даты

 'm-d-Y H:i:s'
  

вот как даты выводятся из таблицы sql как, но мне нужно, чтобы они отображались как d-m-y на графиках.

моя модель :

 class chartData extends Entity
{
    public static function findBy(
        DateTime $StartDate,
        DateTime $EndDate
    ): array
    {
        $params = [
            $StartDate->format('m-d-Y H:i:s'),
            $EndDate->format('m-d-Y H:i:s'),
        ];
        return self::hydrate(DB::select('EXEC Table @StartDate = ?, @EndDate = ?',
            $params
        ));
    }

}
  

мой контроллер :

 public function index (Request $request)
{
    if (!$request->input('StartDate') amp;amp; !$request->input('EndDate')) {
        $StartTime = Carbon::now()->subDays(7);
        $EndTime = Carbon::now();
    } else {
        $StartTime = Carbon::parse($request->input('StartDate'));
        $EndTime = Carbon::parse($request->input('EndDate'));
    }



    $Activity = chartData::findBy(
        Carbon::parse($StartTime),
        Carbon::parse($EndTime)
    );
  

я не могу просто выполнить a -> format (‘d-m-y’), поскольку я получаю ошибки. у кого-нибудь есть идеи о том, как переформатировать это, чтобы дата отображалась как день / месяц / год?

Обновить:

следуя совету, я изменил свой chartjs, чтобы включить рекомендуемое форматирование даты:

   var ctx = document.getElementById("Chart").getContext('2d');
 var recentActivityChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: [],
         datasets: [{
             label: 'hours',
             data: [],
             barThickness: 12,
             fill: true,
             backgroundColor: "rgba(54, 162, 235, 1)",
             borderColor: "rgba(54, 162, 235, 1)",
             borderWidth: 1,
         }]
     },
     options: {
         animation: {
             duration: 1000,
             easing: "linear",
         },
         responsive: true,
         maintainAspectRatio: true,
         legend: {
             display: false,
             position: 'bottom',
             usePointStyle: true,
             labels: {
                 fontColor: "grey",
                 usePointStyle: true,
             },
         },
         scales: {
             yAxes: [{
                 gridLines: {
                     display: true,
                     borderDash: [8, 4],
                 },
                 scaleLabel: {
                     display: true,
                     labelString: 'hours',
                 },
                 ticks: {
                     beginAtZero: false,
                 }
             }],
             xAxes: [{
                 type: 'time',
                 time: {
                     parser: 'labels', // define date format that matches the php data
                     unit: 'day',
                     displayFormats: {
                         day: 'DD-MM-YYYY'
                     },
                     tooltipFormat: 'DD-MM-YYYY'
                 },
                 gridLines: {
                     scaleShowVerticalLines: false,
                     display: false,
                 },
                 ticks: {
                     beginAtZero: false,


                 }
             }]
         },
     }
 });
  

это работает, поскольку даты теперь отображаются в формате дд-мм-гггг. однако теперь диаграмма начинается с 1970 года, а не с того момента, когда фактически начинаются данные в таблице sql.

есть идеи, как это решить?

Эта проблема лучше всего решается во внешнем интерфейсе, а не во внутреннем интерфейсе.

Вы должны определить свою ось X как декартову ось времени следующим образом.

 options: {
  ...
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        parser: '', // define date format that matches the php data
        unit: 'day',
        displayFormats: {
          day: 'D-M-YYYY'
        },
        tooltipFormat: 'D-M-YYYY'
      }
      ...
    }]
  }
  ...
}
  

См . Moment.js чтобы узнать о строках формата , которые могут использоваться для time.parser , time.displayFormats и time.tooltipFormat .

Обратите внимание, что Chart.js внутреннее использование Moment.js для функциональности временной оси. Поэтому вам следует использовать комплектную версию Chart.js это включает в себя Moment.js в одном файле.

ОБНОВЛЕНИЕ: мне удалось отобразить его правильно! это обновленная диаграмма: мне не нужен был парсер, он понимал без того, что нужно было пропустить.

   var ctx = document.getElementById("recentChart").getContext('2d');
 var recentChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: [],
         datasets: [{
             label: 'hours',
             data: [],
             barThickness: 12,
             fill: true,
             backgroundColor: "rgba(54, 162, 235, 1)",
             borderColor: "rgba(54, 162, 235, 1)",
             borderWidth: 1,
         }]
     },
     options: {
         animation: {
             duration: 1000,
             easing: "linear",
         },
         responsive: true,
         maintainAspectRatio: true,
         legend: {
             display: false,
             position: 'bottom',
             usePointStyle: true,
             labels: {
                 fontColor: "grey",
                 usePointStyle: true,
             },
         },
         scales: {
             yAxes: [{
                 gridLines: {
                     display: true,
                     borderDash: [8, 4],
                 },
                 scaleLabel: {
                     display: true,
                     labelString: 'hours',
                 },
                 ticks: {
                     beginAtZero: false,
                 }
             }],
             xAxes: [{
                 type: 'time',
                 time: {
                     unit: 'day',
                     displayFormats: {
                                 day: 'DD-MM-YYYY'
                             },
                 },
                 gridLines: {
                     scaleShowVerticalLines: false,
                     display: false,
                 },
                 ticks: {
                     beginAtZero: true,

                 }
             }]
         },
     }
 });
  

даты теперь отображаются правильно, а не с 1970 года.