Как показать только последние 3 месяца в диаграмме морриса в laravel

У меня возникла проблема в моем проекте. Я хочу видеть активность за последние 3 месяца в моей диаграмме Морриса. Но не знаю, как этого добиться.

Вот что у меня получилось:

enter image description here

В этом я несколько раз попадал в августе. Я хочу всего 3 месяца: август, сентябрь, октябрь.

Вот что я пробовал:

public function sales() {
    $company = Auth::guard('company')->user()->id;
    $date = Carbon::now();
    $currentmonth = Order::where([['company_id', $company], ['status', '<>', 0]])->whereDate('created_at', '>=', $date->copy()->startOfMonth())->whereDate('created_at', '<=', $date->copy()->endOfMonth())->get();
    $lastmonth = Order::where([['company_id', $company], ['status', '<>', 0]])->whereDate('created_at', '>=', $date->copy()->startOfMonth()->subMonth())->whereDate('created_at', '<=', $date->copy()->endOfMonth()->subMonth())->get();
    $anothermonth = Order::where([['company_id', $company], ['status', '<>', 0]])->whereDate('created_at', '>=', $date->copy()->startOfMonth()->subMonths(2))->whereDate('created_at', '<=', $date->copy()->endOfMonth()->subMonths(2))->get();

    $data = [
        [ 'year'=> $date->year . '-' . $date->copy()->startOfMonth()->subMonths(2)->format('m'), 'value'=> $anothermonth->sum('price') ],
        [ 'year'=> $date->year . '-' . $date->copy()->startOfMonth()->subMonth()->format('m'), 'value'=> $lastmonth->sum('price') ],
        [ 'year'=> $date->year . '-' . $date->copy()->format('m'), 'value'=> $currentmonth->sum('price') ],
    ];

    $json = json_encode($data);

    return view('company.dashboard.sales', compact('json'));
}

И мой JavaScript:

<script type="text/javascript">

var months = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];

var area = new Morris.Area({
    element: 'revenue-chart',
    resize: true,
    data: {!! $json !!},
    xkey: 'year',
    ykeys: ['value'],
    lineColors: ['#75a5c1'],
    hideHover: 'auto',
    xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
        var month = months[x.getMonth()];
        return month;
      },
      dateFormat: function(x) {
        var month = months[new Date(x).getMonth()];
        return month;
    },
});
</script>

Помогите, пожалуйста.

1
0
1 093
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Установите для параметра parseTime зоны Морриса значение false:

parseTime: false

И установите xLabelFormat так:

 xLabelFormat: function (x) {
     return months[parseInt(x.label.slice(5))];
 }

Пожалуйста, попробуйте следующий фрагмент:

var data = [
  { year: '2018-08', value: 0 },
  { year: '2018-09', value: 5 },
  { year: '2018-10', value: 10 }];

var months = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];

var lineGraph = Morris.Area({
    element: 'revenue-chart',
    xkey: 'year',
    ykeys: ['value'],
    lineColors: ['#75a5c1'],
    hideHover: 'auto',
    labels: ['Sales'],
    data: data,
    resize: true,
    xLabelAngle: 90,
    parseTime: false,
    xLabelFormat: function (x) {
        return months[parseInt(x.label.slice(5))];
    }
});

$('svg').height(350);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="revenue-chart"></div>

Если я установил время синтаксического анализа false, тогда он не покажет название месяца. Он показывает формат данных 2018-08

Habib Hassan 31.10.2018 14:14

Когда я добавляю ваш код, он показывает только сентябрь, октябрь. Август не показан. Спасибо за помощь

Habib Hassan 31.10.2018 14:46

Да, там август. Это просто скрыто. Вы можете попробовать, как в моем фрагменте, настроить xLabelAngle на вращение этикеток. Вы также можете установить для высоты svg соответствующее значение, если проблема с метками x все еще не устранена.

krlzlx 31.10.2018 15:01

Спасибо большое за вашу помощь.

Habib Hassan 31.10.2018 15:09

Другие вопросы по теме