我有 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'
});
});
最佳答案
以下是您如何实现您想要的目标的方法。
假设您的所有数据都存储在 $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'
})
;
});
});
关于javascript - 添加控件以显示莫里斯图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31667300/