javascript - 添加控件以显示莫里斯图

Question

我有 3 个按钮:日、周和月。当我点击例如:天按钮时该怎么办，莫里斯图将显示结果，x轴为天；当我单击“例如:周”按钮时，莫里斯图将在 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

以下是您如何实现您想要的目标的方法。

假设您的所有数据都存储在 $day、$week 和 $month 中。

对于这个给定的 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>

因此您需要执行以下操作:

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'
        })
        ;

    });

});

查看此working JSFiddle.