时间戳

首页 > 解决方案 > 莫里斯折线图：单击时获取点值

javascript - 莫里斯折线图：单击时获取点值

问题描述

不幸的是，经过一天的时间寻找有关此问题的答案后，我无法在任何地方找到它。如果有人可以在这里帮助我，将不胜感激：

我想获得用户点击的点值。因此，例如在所附图像中，当用户单击如图所示时，我希望获得值为“ra_user3”的值。我目前得到 ra_user1 这是不正确的。我得到了正确的 clickedDate 。

在此处输入图像描述

我的 JS 代码：

// LINE QaqcRA_CHART qaqc
var QaqcRA_user_color = <?php echo json_encode($QaqcRA_user_color); ?>;
var QaqcRA_user_label = <?php echo json_encode($QaqcRA_user_label); ?>;
var QaqcRA_users = <?php echo json_encode($QaqcRA_users); ?>;

var line = new Morris.Line({
  element: 'QaqcRA_charts',
  resize: true,
  data: <?php echo json_encode($QaqcRA_charts); ?>,
  parseTime: false,
  xkey: 'ra_updated_on',
  xLabels: 'Inspection Date',
  xLabelAngle: 45,
  hideHover: 'false',
  ykeys: QaqcRA_user_label,
  labels: QaqcRA_user_label,
  lineColors: QaqcRA_user_color,
  hoverCallback: function(index, options, content, row) {

    var finalContent = content;

    return finalContent;
  }
});

$("#QaqcRA_charts svg").on('click', function(evt) {

  var a = evt.target;
  var target_result = JSON.stringify(a);
  console.log("target_result: " + target_result); // target_result: {"raphael":true,"raphaelid":139}

  var clickedDate = $(".morris-hover-row-label").html().trim();
  var clickedPoint = $(".morris-hover-point").html().trim();
  var comp = clickedPoint.split(":");
  var clickedUser = comp[0];

  console.log("clickedDate: " + clickedDate); // clickedDate: 20 May 2020
  console.log("clickedUser: " + clickedUser); // clickedUser: ra_user1

});

标签： javascriptmorris.js

解决方案

你用来拦截点击事件的方式不好。你应该写这样的东西：

    var line = new Morris.Line({
      element: 'QaqcRA_charts',
      resize: true,
      data: <?php echo json_encode($QaqcRA_charts); ?>,
      parseTime: false,
      xkey: 'ra_updated_on',
      xLabels: 'Inspection Date',
      xLabelAngle: 45,
      hideHover: 'false',
      ykeys: QaqcRA_user_label,
      labels: QaqcRA_user_label,
      lineColors: QaqcRA_user_color,
      hoverCallback: function(index, options, content, row) {

        var finalContent = content;

        return finalContent;
      }
    }).on('click', function(a, row) {
      // here you should be able to handle the click event
      console.log(a,row);
    });

然后您将可以访问您单击的 xkey 的一系列数据；

推荐阅读