添加控件以显示 Morris 图

Question

我有 3 个按钮：日、周和月。当我点击例如：Day 按钮时如何操作，莫里斯图表将在 x 轴上显示带有天数的结果；当我单击例如：Week 按钮时，莫里斯图表将在 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.

添加控件以显示 Morris 图

Add Controls to Show Morris Chart

javascript

php

raphael

laravel

morris.js