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

Question

我在我的项目中遇到了一个问题。我想知道我的莫里斯图表中最近 3 个月的事件情况。但不知道如何实现这一目标。

这是我得到的:

在此我多次获得八月。我想要的只有3个月:8月、9月、10月。

这是我尝试过的:

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

将 Morris Area 的 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>