如何在保持悬停事件触发的同时隐藏悬停的值信息? [英] How to hide values information on hover while keeping hover events firing?

问题描述

我需要在 plotly.js 中自定义图形的悬停交互.我显示时间序列并希望悬停光标只是一条垂直线.光标下方的值应显示在图表下方的表格中(不在图表本身内).我设法显示垂直线光标并显示下表中的值，但无法弄清楚如何禁用在图表中显示值(我的意思是将鼠标悬停在图表上时，工具提示类似于带有值的形状)，请参阅代码段.

I need to customize hover interaction of graph in plotly.js. I display time series and want the hover cursor to be just a vertical line. The values below the cursor should be displayed in a table below the graph (not within the graph itself). I managed to show the vertical line cursor and displaying the values in the table below but can't figure out how to disable showing the values in the graph (I mean the tooltips like shapes with values when hovering over the graph), see the snippet.

我只发现我可以通过在布局上设置属性 hovermode: false 来禁用工具提示，但是没有触发悬停事件，我需要绘制垂直线光标.

I only find I could disable the tooltips by setting the attribute hovermode: false on the layout but then there are no hover events fired, which I need to draw the vertical line cursor.

有没有办法做到这一点?

Is there a way to achieve this?

var gd = document.getElementById('tester');
var hoverInfo = document.getElementById('hoverinfo');

var traceX = {
  name: "X",
  x: ['2001-06-11 11:50', '2001-06-12 00:00', '2001-06-12 12:30'],
  y: [35, 21, 28],
  type: 'scatter', // set the chart type
  mode: 'lines+markers',
  line: {
    width: 1
  }
};

var cursor1 = {
  xid: 1,
  type: 'line',
  // x-reference is assigned to the x-values
  xref: 'x',
  // y-reference is assigned to the plot paper [0,1]
  yref: 'paper',
  x0: '2001-06-12 12:30',
  y0: 0,
  x1: '2001-06-12 12:30',
  y1: 1,
  fillcolor: '#d3d3d3',
  opacity: 0.1,
};

var layout = {
  yaxis: {
    title: "Wind Speed",
    hoverformat: ''
  }, // set the y axis title
  xaxis: {
    showgrid: false, // remove the x-axis grid lines
    tickformat: "%B, %Y", // customize the date format to "month, day"
    hoverformat: ''
  },
  margin: { // update the left, bottom, right, top margin
    l: 40,
    b: 40,
    r: 20,
    t: 20
  },
  showline: true,
  hovermode: 'x',
  shapes: []
};

var hoverFn = function(data) {
  if (gd.layout.shapes.length === 0) {
    gd.layout.shapes.push(cursor1);
  }
  var update = {
    'shapes[0].x0': data.points[0].x,
    'shapes[0].x1': data.points[0].x
  };
  Plotly.relayout(gd, update);

  var infotext = data.points.map(function(d) {
    return (d.data.name + ': ' + d.x + ' | ' + d.y.toPrecision(3));
  });

  hoverInfo.innerHTML = infotext.join('<br/>');
};

var unhoverFn = function(data) {
  //hoverInfo.innerHTML = '';
}

var draw = function(data, layout) {

  Plotly.newPlot(gd, data, layout, {
    showLink: false,
    displaylogo: false
  });

  gd.on('plotly_click', function(data) {
      //console.log('click');
    })
    .on('plotly_beforehover', function(data) {
      //console.log('beforehover');
    })
    .on('plotly_hover', function(data) {
      //var pointNum = data.points[0].pointNumber;
      var pointNum = data;
      hoverFn(data);
    })
    .on('plotly_unhover', function(data) {
      unhoverFn(data);
    });

  Plotly.addTraces(gd, [traceX]);
};

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows) {
  var data = [{
    name: 'P1',
    type: 'scatter', // set the chart type
    mode: 'lines', // connect points with lines
    x: rows.map(function(row) { // set the x-data
      return row['Time'];
    }),
    y: rows.map(function(row) { // set the x-data
      return row['10 Min Sampled Avg'];
    }),
    line: { // set the width of the line.
      width: 1
    }
  }, {
    name: 'P2',
    type: 'scatter', // set the chart type
    mode: 'lines', // connect points with lines
    x: rows.map(function(row) { // set the x-data
      return row['Time'];
    }),
    y: rows.map(function(row) { // set the x-data
      return Number(row['10 Min Sampled Avg']) + 3.0;
    }),
    line: { // set the width of the line.
      width: 1
    }
  }];

  draw(data, layout);
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>

推荐答案

找到了.将 Plotly.Fx.hover(gd, []); 添加到我的 hoverFn() 中.数组(第二个参数)指定要显示的点，将其留空即可.

Found it. Add Plotly.Fx.hover(gd, []); into my hoverFn(). The array (2nd parameter) specifies which points to show, just leave it empty.

(基于此示例在文档中.)

var gd = document.getElementById('tester');
var hoverInfo = document.getElementById('hoverinfo');

var traceX = {
  name: "X",
  x: ['2001-06-11 11:50', '2001-06-12 00:00', '2001-06-12 12:30'],
  y: [35, 21, 28],
  type: 'scatter', // set the chart type
  mode: 'lines+markers',
  line: {
    width: 1
  }
};

var cursor1 = {
  xid: 1,
  type: 'line',
  // x-reference is assigned to the x-values
  xref: 'x',
  // y-reference is assigned to the plot paper [0,1]
  yref: 'paper',
  x0: '2001-06-12 12:30',
  y0: 0,
  x1: '2001-06-12 12:30',
  y1: 1,
  fillcolor: '#d3d3d3',
  opacity: 0.1,
};

var layout = {
  yaxis: {
    title: "Wind Speed",
    hoverformat: ''
  }, // set the y axis title
  xaxis: {
    showgrid: false, // remove the x-axis grid lines
    tickformat: "%B, %Y", // customize the date format to "month, day"
    hoverformat: ''
  },
  margin: { // update the left, bottom, right, top margin
    l: 40,
    b: 40,
    r: 20,
    t: 20
  },
  showline: true,
  hovermode: 'x',
  shapes: []
};

var hoverFn = function(data) {
  Plotly.Fx.hover(gd, []);
  if (gd.layout.shapes.length === 0) {
    gd.layout.shapes.push(cursor1);
  }
  var update = {
    'shapes[0].x0': data.points[0].x,
    'shapes[0].x1': data.points[0].x
  };
  Plotly.relayout(gd, update);

  var infotext = data.points.map(function(d) {
    return (d.data.name + ': ' + d.x + ' | ' + d.y.toPrecision(3));
  });

  hoverInfo.innerHTML = infotext.join('<br/>');
};

var unhoverFn = function(data) {
  //hoverInfo.innerHTML = '';
}

var draw = function(data, layout) {

  Plotly.newPlot(gd, data, layout, {
    showLink: false,
    displaylogo: false
  });

  gd.on('plotly_click', function(data) {
      //console.log('click');
    })
    .on('plotly_beforehover', function(data) {
      //console.log('beforehover');
    })
    .on('plotly_hover', function(data) {
      //var pointNum = data.points[0].pointNumber;
      var pointNum = data;
      hoverFn(data);
    })
    .on('plotly_unhover', function(data) {
      unhoverFn(data);
    });

  Plotly.addTraces(gd, [traceX]);
};

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows) {
  var data = [{
    name: 'P1',
    type: 'scatter', // set the chart type
    mode: 'lines', // connect points with lines
    x: rows.map(function(row) { // set the x-data
      return row['Time'];
    }),
    y: rows.map(function(row) { // set the x-data
      return row['10 Min Sampled Avg'];
    }),
    line: { // set the width of the line.
      width: 1
    }
  }, {
    name: 'P2',
    type: 'scatter', // set the chart type
    mode: 'lines', // connect points with lines
    x: rows.map(function(row) { // set the x-data
      return row['Time'];
    }),
    y: rows.map(function(row) { // set the x-data
      return Number(row['10 Min Sampled Avg']) + 3.0;
    }),
    line: { // set the width of the line.
      width: 1
    }
  }];

  draw(data, layout);
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>

这篇关于如何在保持悬停事件触发的同时隐藏悬停的值信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！