Javascript 单击morris栏上的事件_Javascript_Jquery_Morris.js

Javascript 单击morris栏上的事件

javascript jquery

Javascript 单击morris栏上的事件,javascript,jquery,morris.js,Javascript,Jquery,Morris.js,我实现了morris图，还使用了单击功能，但我希望当我单击工具栏时，该工具栏的数据将发出警报。那么如何获取数据呢 <!DOCTYPE html> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="http://co

我实现了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>


js条形图示例
莫里斯酒吧({
元素：“条形图示例”，
数据：[
{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']，
标签：[“A系列”、“B系列”]
});
$（“#条形示例svg rect”）。在（'click'，函数（数据）{
警报（数据）；//警报弹出时显示[object.object]
});

首先，感谢您让我发现。；）

这是一次编辑
几次尝试后…
我最终对我的解决方案进行了真正的简化。
因此，为了清晰起见，我删除了所有以前的编辑。您可以在“编辑历史记录”中查看它们

所以现在，根据下面的评论：

我们在下图的摘要中获得了所需的信息：

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函数不是很自豪，但是为了检索我们刚才单击的矩形的索引，我成功地使用了它。然后我调用一个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;
}

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

上面的例子是折线图，而不是多条不同颜色的条形图

基于上述解决方案，下面是我的代码，以防您的莫里斯图表中有三个条形图：

$('#bar-sixmonthstats svg rect').on('click', function () {
    _$month = $('.morris-hover-row-label').text();

    //debugger;
    barColor = $(this).attr('fill');
    var barType = '';

    switch (barColor) {
        case '#64a900': barType = 'PO'; break;
        case '#7acc00': barType = 'SO'; break;
        case '#4d8000': barType = 'WO'; break;
    }
                        
    console.log("Order Type : " + barType + "\nDate : " + _$month);
});

好啊这有点复杂。。。将尝试查找一些内容。好的，我正在等待@Louys Patrice您的答案有效，但当图形调整大小时，它返回未验证信息。请查看此链接。好的，我知道了。在这种情况下，并非所有日期都显示。我将尝试基于最后一个示例的其他内容。等等我认为你应该从你现在的位置开始另一个问题。最初的问题是“当我点击一个条来提醒它时，如何获取数据？”我回答了这个问题。请接受这个答案。。。重新开始一个关于轴标签和角度积分的明确问题。然后，这个问题会以最新的方式出现，并引起更多的关注如果可能的话，我会回答这些额外的问题，但是你需要更多的人来处理这个案子。