如何在Laravel的莫里斯图中仅显示最近3个月

Question

我的项目遇到了问题。我想在莫里斯图表中最近3个月的活动如何。但是不知道如何实现。

这就是我得到的：

在这个过程中，我多次获得了August。我只需要三个月：八月，九月，十月。

这是我尝试过的：

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>

请帮助我。

Answer 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>