Question

我有3个按钮：日，周和月。当我点击例如：日期按钮时，如何做，莫里斯图表将显示x轴上的天数结果;当我点击例如：周按钮时，morris图表将在x轴上显示周数。这可行吗？仅供参考：我使用Laravel 4作为后端。

// Controller.php这样

$day= U::select('u.price', DB::raw('DATE(u.solddate) as day'))
        ->orderBy('u.solddate','DESC')
        ->get();

// JS

$("#day").click(function(){
    $("svg, .morris-hover.morris-default-style").remove();
    var line = new Morris.Line({
        element: 'line-chart',
        resize: true,
        data: {{$day}},
        xkey: 'day',
        ykeys: ['price'],
        labels: ['Price'],
        lineColors: ['#3c8dbc'],
        hideHover: 'auto'
    });
});

Answer 1

Here's how you will be able to achieve what you want.

Let's assume all your data are stored in $day, $week and $month.

So for this given HTML:

<div id="line-chart" style="height: 300px;"></div>
<hr/>
<button data-type="day">Day</button> |
<button data-type="week">Week</button> |
<button data-type="month">Month</button>

You therefore need to do:

jQuery(function($) {

    $('button').on('click', function(e) {
        $('#line-chart').empty();
        var type = $(this).data('type')

        , month = {{ $month}}

        , week = {{ $week }}

        , day = {{ $day }}

        , data = {
            month: month,
            week: week,
            day: day
            }

        , line = new Morris.Line({
            element: 'line-chart',
            resize: true,
            data: data[type],
            xkey: 'y',
            ykeys: ['a', 'b'],
            labels: ['Price', 'Test'],
            lineColors: ['#3c8dbc', '#3c8dbc'],
            hideHover: 'auto'
        })
        ;

    });

});

See this working JSFiddle.

添加控件以显示Morris图表

1 个答案: