Question

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

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

有没有办法实现这个目标？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

找到它。将Plotly.Fx.hover(gd, []);添加到我的hoverFn()。数组（第二个参数）指定要显示的点，只需将其留空。

（基于文档中的example。）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

另一个解决方案是使用hoverinfo值并将其设置为“无”＆＃39;如参考文献中所示：https://plot.ly/javascript/reference/#scatter-hoverinfo

像这样：

var trace1 =
{
  x: [1, 2, 3],
  y: [40, 50, 60],
  name: 'data1',
  type: 'scatter',
  hoverinfo: 'none'
};

优点是unhover-event仍然会激活。如果您改为使用Plotly.Fx.hover(gd, []);，则无法触发取消切换事件。

从参考文献中复制： hoverinfo（flaglist string）

＆＃34; x＆＃34;，＆＃34; y＆＃34;，＆＃34; z＆＃34;，＆＃34; text＆＃34;，＆＃34; name＆＃34;的任意组合加入＆＃34; +＆＃34;或者＆＃34;所有＆＃34;或＆＃34;无＆＃34;或＆＃34;跳过＆＃34;。示例：＆＃34; x＆＃34;，＆＃34; y＆＃34;，＆＃34; x + y＆＃34;，＆＃34; x + y + z＆＃34;，＆＃34; all＆＃ 34; 默认：＆＃34;全部＆＃34; 确定悬停时显示的跟踪信息。如果设置了none或skip，则悬停时不会显示任何信息。但是，如果设置了none，则仍然会点击并悬停事件。

如何在保持悬停事件发生时隐藏悬停值信息？

2 个答案: