个人中心
gpt4 book ai didi

javascript - 莫里斯栏上的点击事件

转载 作者：行者123 更新时间：2023-12-01 03:34:32 26 4
gpt4 key购买 nike

我实现了莫里斯图，并且还致力于点击功能，但我希望当我点击栏时，该栏的数据将发出警报。那么如何获取数据。 

 <!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() 处理程序外部声明的。

参见this new CodePen

关于javascript - 莫里斯栏上的点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38662260/

26 4 0
文章推荐： python - 计算不同类型的支出 - Pandas/Numpy - Python
文章推荐： javascript - 从外部网站检索 json 文件的一部分 (sparkfun)
文章推荐： jquery - 如何防止提交事件并通过 onclick 事件调用 ActionResult Method Create 使用 Jquery ASP.NET MVC 提交表单数据？
文章推荐： Jquery - 在表中查找值