Question

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

Answer 1

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

绘图后运行功能：

定位按钮的javascript功能应该只在绘制图形完成渲染后运行，因此基于此this answer code，我调用在绘图完全渲染后定位按钮的函数。

参考文献：

SO Answer

＆＃13;

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

＆＃13;

.position-button {
  position: absolute;
}

.style-this {
  background: grey;
}

.wrapper {
  position: relative;
}

＆＃13;

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

＆＃13;

一种简单的方法是将情节包裹在div设置为相对定位，并使div包裹按钮绝对定位并将其与图例对齐。请参考以下示例。

＆＃13;

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

＆＃13;

.position-button {
	position: absolute;
	top: 190px;
	left: 89%;
}
.style-this{
	background:grey;
}
.wrapper{
	position:relative;
}

＆＃13;

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

＆＃13;

在Plotly.js图表中添加图例（或键）下方的按钮

1 个答案:

在Plotly.js图表​​中添加图例（或键）下方的按钮

1 个答案:

在Plotly.js图表中添加图例（或键）下方的按钮