我引用本教程创建了绘图 https://plot.ly/javascript/filled-area-plots/ .But tool tip is not coming correctly for left and right side.Some part of tooltip is hiding.不应该。
当鼠标悬停在图表的左侧时，是否有可能在右侧同时显示工具提示，反之亦然？
我也在分享截图，请指导。
这是我的代码:-
<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>最佳答案
您可以尝试增加工具提示的 z-index。我使用 chrome 开发人员工具中的元素概述对其进行了调查。以下对象结构 (DOM) 在工具提示 <div id="myDiv"> 的绘图中有条不紊地构建-> <div class="plot-container plotly"> -> <div class="svg-container"> -> <svg class="main-svg"> -> <g class="hoverlayer">
所以只需在您的 html 或类似这样的东西上附加 css:
<style>
#myDiv .hoverlayer:{
z-index: 100
}
</style>
请注意，在我看来这是一个肮脏的解决方案。但我不知道如何仅使用库 api 来解决它
关于plotly - Graph 的工具提示未正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43612266/