添加控件以显示莫里斯图
添加控件以显示莫里斯图
提问于 2015-07-28 04:20:04
我有三个按钮:日，周，月。当我单击例如: Day按钮时，morris图表将显示x轴上有天数的结果；当我单击eg: Week按钮时，morris图表将显示x轴上有周的结果。这可行吗？FYI:我用Laravel 4做后端。
//controller.php er.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'
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-28 17:14:05
以下是你如何能够实现你想要的。
假设您的所有数据都存储在$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'
})
;
});
});参见此工作JSFiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31667300
复制相关文章
相似问题
腾讯云开发者
