点击morris酒吧的活动
我实现morris图并且还在处理点击function，但是当我点击栏时我想要那个栏的数据会提醒。那么如何获取数据。
Morris.js Bar Chart Example 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 }); 首先，谢谢你让我发现这个很酷的图库 。 ;）
这是一个编辑
经过几次尝试……
我最终真正简化了我的解决方案。
为清楚起见，我删除了之前的所有编辑。 无论如何，您可以在编辑历史中看到它们。 ）。
所以现在，基于以下评论中提供的这个新示例 ：
我们在图表下方的摘要中获取了所需的信息：
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和thisDate保留任何（空）onload。
但是它们会在点击时保留最后点击的条形图值。
这些变量可用于其他后续脚本，因为在click()处理程序之外声明。
请参阅此新CodePen
我对以下javascript函数并不感到自豪，但要检索我们刚刚单击的矩形的索引，我成功使用它。 然后我调用C＃méthode来检索值。
$('#m_Top10Applications svg rect').on('click', function (event) { window.location.replace("MyPage.aspx?Top10Index=" + GetMorrisBarClickedBarIndex($this));}); function GetMorrisBarClickedBarIndex(par$ThisRect) { var xRect = par$ThisRect[0].x.baseVal.value; var TheParent = par$ThisRect.parent(); var Rectangles = TheParent.find("rect"); var Rect0 = Rectangles[0]; var Rect1 = Rectangles[1]; var X0 = Rect0.x.baseVal.value; var X1 = Rect1.x.baseVal.value; var RectWidth = X1 - X0; var xPos = xRect - X0; var Index = Math.floor(xPos / RectWidth, 0); return Index; }
“rect”元素不在我的折线图中，所以我只是将其删除了。 非常感谢，它给了我我所需要的东西。
var thisDate,thisData; $( "#morrisLine svg" ).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 ); });