个人中心
gpt4 book ai didi

javascript - 在 Plotly.js 图表中的图例(或键)下方添加按钮

转载 作者：行者123 更新时间：2023-11-28 14:59:02 24 4
gpt4 key购买 nike

我有一个 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>

最佳答案

一个复杂但可靠的解决方案是，使用 javascript 并获取图中图例的位置(使用函数 getBoundingClientRect)，然后将该位置设置为按钮，JQuery 库正在被使用我可以这样做，但也可以通过 javascript 进行一些调整。

绘图渲染后运行函数:

定位按钮的 javascript 函数应该仅在绘图完成渲染后运行，因此基于此 SO Answer ，我在绘图完全呈现后调用定位按钮的函数。

引用资料:

  1. getBoundingClientRect 

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>

关于javascript - 在 Plotly.js 图表中的图例(或键)下方添加按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50552986/

24 4 0
文章推荐： jquery - CSS 绝对 DIV 导致其他绝对 DIV 问题
文章推荐： javascript - 在调整大小时将图像高度应用于 Div
文章推荐： css - 如何使表格行可点击并通过在视觉上将其置于最前面来突出显示它？
文章推荐： jquery - 在 mouseeenter 上制作一个 div 弹出窗口(内部的工作示例)要求代码优化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com