javascript - 从 js.plotly 重叠创建的 svg 容器
问题描述
当我缩小 chrome 的大小时,它们会重叠。这是我的html。我正在考虑 id=pie 和 id=gauge。它们在一个行类中,并且都是 col-md-5,所以它们不应该重叠,但是为什么......?饼图变大,其图例显示在仪表图顶部。
<div class="row">
<div class="col-md-2">
<div class="well">
<h5>SELECT Sample:</h5>
<select id="selDataset" onchange="optionChanged(this.value)"></select>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Sample MetaData</h3>
</div>
<div id="sample-metadata" class="panel-body"></div>
</div>
</div>
<div class="col-md-5">
<div id="pie"></div>
</div>
<div class="col-md-5">
<div id="gauge"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div id="bubble"></div>
</div>
我需要在js中改变一些东西吗?忽略我正在使用的数据我只想知道是否有我必须传入的尺寸特征。谢谢!
function piechart(alldata){
var values = alldata.sample_values.slice(0,10);
var labels = alldata.otu_ids.slice(0,10);
var hover_text = alldata.otu_labels.slice(0,10);
var trace = {
"values":values,
"labels":labels,
"hovertext":hover_text,
"type":"pie"
};
var data = [trace];
var loc_plot = document.getElementById("pie");
Plotly.newPlot(loc_plot, data);
};
function bubblechart(data){
var x = data.out_ids;
var y = data.sample_values;
var markersize = data.sample_values;
var markercolors = data.otu_ids;
var textvalues = data.otu_labels;
console.log(markercolors);
var trace = {
"x": x,
"y":y,
text:textvalues,
mode: "markers",
marker:{
size:markersize,
color:markercolors
}
};
var layout = {
title:"Bubble Chart",
xaxis: {title:"OTU ID"},
showlegend:true
};
var data = [trace];
var plot_loc = document.getElementById("bubble");
Plotly.newPlot(plot_loc, data, layout);
};
解决方案
推荐阅读
- spring-boot - 项目中有更多的代码行会降低spring mvc的效率吗?
- reactjs - 如果 -hours 变量已更改,我如何获得此使用效果/功能仅运行
- firebase - 颤振的查询
- entity-framework - EF Core 2.2.4 和种子数据
- flutter - 在单独的小部件颤动上更新状态
- markdown - 如何在markdown的句号句号中正确添加粗体或草书
- css - bootstrap 在某些断点处改变弯曲方向?
- react-native - 在 react-native 中更新 Metro 捆绑器
- c# - 从 C# 中的 JSON 响应中删除所有出现的特定键
- android - 重新启用通过 Flutter 安装 App 的权限