在莫里斯酒吧点击活动

问题描述 投票:1回答:3

我实现了morris图并且还在处理点击功能,但是当我点击栏时我想要那个栏的数据会提醒。那么如何获取数据。

 <!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>
javascript jquery morris.js
3个回答
2
投票

首先,谢谢你让我发现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 );
});

thisDatethisData没有任何东西(空)上传。 但是它们会在点击时保留最后点击的条形图值。 这些变量可以在其他后续脚本中使用,因为在click()处理程序之外声明。

this new CodePen


0
投票

“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 );
    });

0
投票

我对以下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;
}
© www.soinside.com 2019 - 2024. All rights reserved.