在Plotly.js图表中的图例(或键)下添加按钮
在Plotly.js图表中的图例(或键)下添加按钮
提问于 2018-05-27 22:10:52
我有一张Plotly.js图表。如何将按钮放置在图例(或键)下？
下面是我正在使用的一个示例：https://codepen.io/synaptik/pen/YLmRMM
<div id="myDiv"></div>
<div id="inset" style="margin-left:80px;">
<button style="background:grey;">Target<br/>Info</button
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-28 02:52:05
一个复杂但健壮的解决方案是，使用javascript并获得图例在绘图中的位置(使用函数getBoundingClientRect)，然后将该位置设置为按钮，我使用JQuery库来完成此操作，但也可以通过javascript进行一些调整。
绘图渲染后的运行函数：
定位按钮的javascript函数只有在绘图图形完成渲染后才能运行，因此基于此SO Answer，我调用了在绘图完全渲染后定位按钮的函数。
参考文献：
var data_x = ['2018-05-01', '2018-05-02', '2018-05-03', '2018-05-04', '2018-05-05', '2018-05-06', '2018-05-07', '2018-05-08', '2018-05-09'];
// data
var Data = {
type: 'scatter',
x: data_x,
y: [4, 2, -1, 4, -5, -7, 0, 3, 8],
mode: 'lines+markers',
name: 'Data',
showlegend: true,
hoverinfo: 'all',
line: {
color: 'blue',
width: 2
},
marker: {
color: 'blue',
size: 8,
symbol: 'circle'
}
}
// violations
var Viol = {
type: 'scatter',
x: ['2018-05-06', '2018-05-09'],
y: [-7, 8],
mode: 'markers',
name: 'Violation',
showlegend: true,
marker: {
color: 'rgb(255,65,54)',
line: {
width: 6
},
opacity: 0.5,
size: 14,
symbol: 'circle-open'
}
}
// control limits
var CL = {
type: 'scatter',
x: data_x.concat([null]).concat(data_x),
y: [5, 5, 5, 5, 6, 6, 7, 7, 7, null, -5, -5, -5, -5, -6, -6, -7, -7, -7],
mode: 'lines',
name: 'LCL/UCL',
showlegend: true,
line: {
color: 'green',
width: 2,
dash: 'dash'
}
}
// centre
var Centre = {
type: 'scatter',
x: data_x,
y: [3, 1, 2, 2, 2, -2, 2, 2, 2],
mode: 'lines',
name: 'EWMA',
showlegend: true,
line: {
color: 'grey',
width: 2
}
}
// all traces
var data = [Data, Viol, CL, Centre]
// layout
var layout = {
title: 'Basic SPC Chart',
xaxis: {
zeroline: false
},
yaxis: {
range: [data_x[0], data_x[data_x.length - 1]],
zeroline: false
}
}
function positionButton() {
var offsets = $("g.legend")[0].getBoundingClientRect();
$("div#inset").css("left", offsets.left);
var offsetTop = offsets.height + offsets.top;
$("div#inset").css("top", offsetTop);
}
Plotly.plot('myDiv', data, layout).then(function() {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(function() {
positionButton();
});
});
});
$(window).on("resize", function() {
positionButton();
});.position-button {
position: absolute;
}
.style-this {
background: grey;
}
.wrapper {
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div class="wrapper">
<div id="myDiv"></div>
<div id="inset" class="position-button">
<button class="style-this">Target<br/>Info</button
</div>
</div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
</html>
一种简单的方法是，将绘图包装在设置为相对定位的div中，并使包装按钮的div绝对定位并将其与图例对齐。请参考下面的示例。
var data_x = ['2018-05-01' , '2018-05-02' , '2018-05-03' , '2018-05-04' , '2018-05-05' , '2018-05-06' , '2018-05-07' , '2018-05-08' , '2018-05-09' ];
// data
var Data = {
type: 'scatter',
x: data_x,
y: [4,2,-1,4,-5,-7,0,3,8],
mode: 'lines+markers',
name: 'Data',
showlegend: true,
hoverinfo: 'all',
line: {
color: 'blue',
width: 2
},
marker: {
color: 'blue',
size: 8,
symbol: 'circle'
}
}
// violations
var Viol = {
type: 'scatter',
x: ['2018-05-06', '2018-05-09'],
y: [-7,8],
mode: 'markers',
name: 'Violation',
showlegend: true,
marker: {
color: 'rgb(255,65,54)',
line: {width: 6},
opacity: 0.5,
size: 14,
symbol: 'circle-open'
}
}
// control limits
var CL = {
type: 'scatter',
x: data_x.concat([null]).concat(data_x),
y: [5,5,5,5,6,6,7,7,7, null, -5,-5,-5,-5,-6,-6,-7,-7,-7],
mode: 'lines',
name: 'LCL/UCL',
showlegend: true,
line: {
color: 'green',
width: 2,
dash: 'dash'
}
}
// centre
var Centre = {
type: 'scatter',
x: data_x,
y: [3,1,2,2,2,-2,2,2,2],
mode: 'lines',
name: 'EWMA',
showlegend: true,
line: {
color: 'grey',
width: 2
}
}
// all traces
var data = [Data,Viol,CL,Centre]
// layout
var layout = {
title: 'Basic SPC Chart',
xaxis: {
zeroline: false
},
yaxis: {
range: [data_x[0], data_x[data_x.length-1]],
zeroline: false
}
}
Plotly.plot('myDiv', data,layout);.position-button {
position: absolute;
top: 190px;
left: 89%;
}
.style-this{
background:grey;
}
.wrapper{
position:relative;
}<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div class="wrapper">
<div id="myDiv"></div>
<div id="inset" class="position-button">
<button class="style-this">Target<br/>Info</button
</div>
</div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50552986
复制相关文章
相似问题