我正在使用 DataMaps制作等值线,但在修改图例时遇到问题。我想让图例垂直并位于 map 右侧。文档不清楚如何执行此操作。如何创建堆叠/垂直图例?
我使用以下代码来创建图例:
var legend_params = {
legendTitle: "Some Test Data",
};
map.legend(legend_params);
这是试图修改它的 css:
.datamaps {
position: relative;
display: inline-block;
text-align: center;
}
.datamaps-legend {
color: white;
right: -100px;
top: 0;
position: relative;
display: inline-block;
text-align: center;
}
.datamaps-legend dl {
text-align: center;
display: inline-block;
position: static;
}
最佳答案
我认为数据图中没有水平图例选项。我将它用于一个项目并最终重写了 legend 函数以使其满足要求。我能够使用 CSS 将图例堆叠/垂直放置在 map 的右侧。颜色和值没有对齐。如果值是静态的,您可以通过定位特定的 dt/dd(:nth-child 或 :nth-of-type)元素并根据需要添加填充来排列它们。如果值是动态的,您将需要一个更聪明的解决方案。我为 .datamaps-legend dt 添加了 css,并在 .datamaps-legend 中修改了 top。 fiddle 中的示例
.datamaps-legend dt{
clear:both;
}
.datamaps-legend {
color: white;
right: -100px;
top: 128px;
position: relative;
display: inline-block;
text-align: center;
}
关于javascript - 在数据图中制作垂直图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40833690/