Как показать только последние 3 месяца в диаграмме Морриса в Laravel - PullRequest
Новая
       10

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

0 голосов
/ 31 октября 2018

Я столкнулся с проблемой в моем проекте. Я хочу, чтобы последние 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 голосов
/ 31 октября 2018

Установите для параметра 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>
...