莫里斯栏上的单击事件 [英] click event on morris bar
问题描述
我实现了莫里斯图，也可以使用单击功能，但是我想当我单击栏时该栏的数据将发出警报.因此如何获取数据.
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Bar Chart Example</title>
</head>
<body>
<div id="bar-example"></div>
</body>
<script>
Morris.Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
$( "#bar-example svg rect" ).on('click', function(data) {
alert( data);//show [object.Object] when alert popup
});
</script>
</html>
首先，谢谢您让我发现这个很酷的图形库. ;)
这是一个编辑
经过几次尝试...
我最终真正简化了解决方案.
因此，为清楚起见，我删除了所有先前的编辑.无论如何，您都可以在编辑历史记录中看到它们. ;).
现在，基于以下提供的新示例，在以下注释中:
我们在图表下方的摘要中获得了所需的信息:
var thisDate,thisData;
$( "#bar-example svg rect" ).on('click', function() {
// Find data and date in the actual morris diply below the graph.
thisDate = $(".morris-hover-row-label").html();
thisDataHtml = $(".morris-hover-point").html().split(":");
thisData = thisDataHtml[1].trim();
// alert !!
alert( "Data: "+thisData+"\nDate: "+thisDate );
});
thisDate和thisData没有任何负载(空).
但是它们保留了click上最后点击的条形值.
这些变量在click()处理程序之外声明，因此可以在其他后续脚本中使用.
请参见此新CodePen
I implement morris graph and also working on click function but i want when i clicked on bar then data of that bar will alert.so how can get data.
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Bar Chart Example</title>
</head>
<body>
<div id="bar-example"></div>
</body>
<script>
Morris.Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
$( "#bar-example svg rect" ).on('click', function(data) {
alert( data);//show [object.Object] when alert popup
});
</script>
</html>
First, thank you to let me discover this cool graph library. ;)
This is an EDIT
After a couple tries...
I ended up in a real simplification of my solution.
So for clarity, I removed all previous edit. You can see them in edit history anyway. ;).
So now, based on this new example provided in comments below:
We are getting the needed infos in the summary below the graph:
var thisDate,thisData;
$( "#bar-example svg rect" ).on('click', function() {
// Find data and date in the actual morris diply below the graph.
thisDate = $(".morris-hover-row-label").html();
thisDataHtml = $(".morris-hover-point").html().split(":");
thisData = thisDataHtml[1].trim();
// alert !!
alert( "Data: "+thisData+"\nDate: "+thisDate );
});
thisDate and thisData hold nothing (empty) onload.
But they hold the last clicked bar values on click.
These variables are usable in other subsequent scripts, since declared outside of the click() handler.
See in this new CodePen
这篇关于莫里斯栏上的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
