问题描述
我有一个运行良好的Plotly.JS热图，我想在单独的div上放置一些描述性文本，但是差距看起来有些尴尬。我以某种方式努力减少填充量，以使我的文字（例如，我的描述）和热图更加接近。我尝试使用CSS，但是我显然不满意。我确信这是一个简单的答案，并且我忽略了一些简单的事情。任何帮助表示赞赏。
Codepen：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>
解决方法
您可以在布局中使用margin configuration：
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>,
因为Plotly.JS正在生成SVG，因此对其进行样式设置并不容易。一种解决方案是使用绝对位置来设置元素的样式，以便您可以将其与SVG“重叠”。
例如：
var colorscaleValue = [
[0,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>,
为什么不在布局本身中添加文本？
var layout = {
"title": {"text": "My description."},...
};