莫里斯酒吧上的點擊事件

我實現了莫里斯圖和點擊功能，但我希望當我點擊酒吧然後該酒吧的數據alert.so如何獲取數據。莫里斯酒吧上的點擊事件

<!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>

來源

2016-07-29 User101

首先，謝謝你讓我發現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保持沒有（空）的onload。
但他們持有點擊最後點擊的欄值。
這些變量可用於其他後續腳本，因爲在click()處理程序之外聲明。

見this new CodePen

來源

2016-07-29 16:05:30

但我需要x軸或xkey數據，y的值喜歡2016或2012 .. – User101

好的...這有點複雜...會試圖找到一些東西。 –

好吧，我等待@Louys Patrice – User101

我不是很自豪以下JavaScript函數，但檢索矩形的指標上，我們只要按一下，我成功地使用它。然後我調用C＃方法來檢索值。

$('#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; 
}

來源

2017-09-08 15:27:51

莫里斯酒吧上的點擊事件

回答

相關問題