Morris折线图：单击时获取点值

Question

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

我想获得用户点击的点值。因此，例如在所附的图像中，当用户单击如图所示时，我想要获取值为“ 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

});

Answer 1

您用来拦截click事件的方式不好。您应该写类似：

    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的一系列数据；