Question

我创建了plottly图表，参考了这个教程https://plot.ly/javascript/filled-area-plots/。但是左右两侧的工具提示不正确。工具提示的某些部分是隐藏的。它不应该是。

当鼠标悬停在图表的左侧时，是否有可能在右侧显示两个工具提示，反之亦然？

我也在分享屏幕截图。请指导。

这是我的代码： -

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>  
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var abc = ['2013-10-04 02:23:00', '2013-10-22 12:23:00',  '2013-11-04 20:23:00', '2013-11-020 10:23:00','2013-12-04 15:10:45', '2013-12-26 06:03:00'];
abc[6]='2014-05-02 20:23:00';
var trace1 = {
x: abc,
y: [1, 3, 6,9, 4, 5,8],
  fill: 'tozeroy',
  fillcolor: 'red',
  text: server1,
  hoverinfo: "x+y+text",
  type: 'scatter',
  mode:"markers",
  marker:
  {
    size:4,
    color:"gray"
  },
  uid:"c2e171",
  dragmode:"turntable"
};
var layout = {
  margin: {
    l: 35,
    r: 40,
    b: 50,
    t: 10
  },
  legend: {
    "orientation": "h"
  },
  xaxis: {
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  yaxis : {
    fixedrange: true,
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  dragmode:false,
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout, {modeBarButtonsToRemove: ['sendDataToCloud','hoverCompareCartesian','zoom2d','pan2d','select2d','lasso2d','autoScale2d','hoverClosestCartesian','toggleSpikelines']});

var plotDiv = document.getElementById('myDiv');
plotDiv.on('plotly_relayout',
function(eventdata){  
    alert( 'ZOOM!' + '\n\n' +
        'Event data:' + '\n' + 
         JSON.stringify(eventdata) + '\n\n' +
        'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' +
        'x-axis end:' + new Date(eventdata['xaxis.range[1]']));
        var xVal = new Date(eventdata['xaxis.range[0]']);
        var yVal = new Date(eventdata['xaxis.range[1]']);
});

</script>
</body>

Answer 1

您可以尝试增加工具提示的z-index。我使用chrome开发人员工具中的元素概述来创建它。以下对象结构（DOM）在绘图中以图形方式构建到工具提示<div id="myDiv"> - ＆gt; <div class="plot-container plotly"> - ＆gt; <div class="svg-container"> - ＆gt; <svg class="main-svg"> - ＆gt; <g class="hoverlayer">

所以只需在你的html或类似的东西上添加css：

<style>
  #myDiv .hoverlayer:{
    z-index: 100
  }
</style>

请注意，这是我认为的一个肮脏的解决方案。但我不知道如何使用库api

来解决它

图表的工具提示在情节

1 个答案: