我实现了莫里斯图，并且还致力于点击功能，但我希望当我点击栏时，该栏的数据将发出警报。那么如何获取数据。
<!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>
最佳答案
首先，谢谢你让我发现this cool graph library 。 ;)
这是一个编辑
经过几次尝试...
我最终真正简化了我的解决方案。
因此，为了清楚起见，我删除了所有以前的编辑。无论如何，您都可以在编辑历史记录中看到它们。 ;).
所以现在，基于这个new example provided在下面的评论中:
我们在图表下方的摘要中获取了所需的信息:
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() 处理程序外部声明的。
关于javascript - 莫里斯栏上的点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38662260/