想要减少Plotly.JS热图和来自另一个div的文本之间的填充/空间-需要CSS

我有一个Plotly.JS热图，它运行得很好，我想在它上面放一些描述性文本，放在一个单独的div中，但这个差距看起来有点尴尬。不知怎的，我正在努力减少填充，以便我的文本(例如，我的描述(和热图更紧密地联系在一起。我试过使用CSS，但我显然不喜欢。我相信这是一个简单的答案，我忽略了一些简单的东西。感谢您的帮助。

代码笔：https://codepen.io/tenebris_silentio/pen/eYzgZMw

<!DOCTYPE html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<br>
My description.
<div id='myDiv'><br> </div>
</div>
</div><script>
var colorscaleValue = [
[0, '#ADD8E6'],
[1, '#000080']
];
var data = [
{
z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
y: ['Category 1', 'Category 2', 'Category 3'],
colorscale: colorscaleValue,
type: 'heatmap',
hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',
hoverongaps: true
}
];
var layout = {
title: '',
width: 900,
height: 560,
autosize: false,
yaxis: {automargin: true}
};
Plotly.newPlot('myDiv', data, layout);
</script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>
<style>
.myDiv{
padding: -1px;
}
</style>

您可以在布局中使用边距配置：

var layout = {
// ...
margin: {
t: 10
},
// ...

<!DOCTYPE html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<br>
My description.
<div id='myDiv'><br> </div>
</div>
</div><script>
var colorscaleValue = [
[0, '#ADD8E6'],
[1, '#000080']
];
var data = [
{
z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
y: ['Category 1', 'Category 2', 'Category 3'],
colorscale: colorscaleValue,
type: 'heatmap',
hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',
hoverongaps: true
}
];
var layout = {
title: '',
width: 900,
height: 560,
autosize: false,
margin: {
t: 10
},
yaxis: {automargin: true}
};
Plotly.newPlot('myDiv', data, layout);
</script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>
<style>
.myDiv{
padding: -1px;
}
</style>

为什么不在布局本身中添加文本？

var layout = {
"title": {"text": "My description."},
...
};

因为Plotly.JS正在生成SVG，所以对其进行样式设置并不容易；"重叠"；使用SVG。

例如：

var colorscaleValue = [
[0, '#ADD8E6'],
[1, '#000080']
];
var data = [
{
z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
y: ['Category 1', 'Category 2', 'Category 3'],
colorscale: colorscaleValue,
type: 'heatmap',
hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',
hoverongaps: true
}
];
var layout = {
title: '',
width: 900,
height: 560,
autosize: false,
yaxis: {automargin: true}
};
Plotly.newPlot('myDiv', data, layout);
</script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

.myDiv{
padding: -1px;
}
p {
position: absolute;
z-index: 10;
margin-top: 45px;
margin-left: 80px;
}

<p>My description.</p>
<div id='myDiv'></div>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

相关内容

最新更新

热门标签：