4

我正在使用DataMaps制作等值线，但在修改图例时遇到问题。我想让图例垂直并位于地图的右侧。该文档不清楚如何执行此操作。如何创建堆叠/垂直图例？

我使用以下代码创建图例：

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

在此处输入图像描述 这是我的 jsfiddle 示例。

4

1 回答 1

3

我认为数据图中没有水平图例的选项。我将它用于一个项目并最终重写了图例功能以使其符合要求。我能够使用 CSS 将图例堆叠/垂直并放在地图的右侧。颜色和值没有排列。如果值是静态的，您可以通过定位特定的 dt/dd（:nth-child 或 :nth-of-type）元素并根据需要添加填充来排列它们。如果值是动态的，您将需要一个更聪明的解决方案。我为 .datamaps-legend dt 添加了 css，并在 .datamaps-legend 中修改了顶部。小提琴中的例子

.datamaps-legend dt{
  clear:both;
}
.datamaps-legend {
    color: white;
    right: -100px;
    top: 128px;
    position: relative;
    display: inline-block;
    text-align: center;
 }
于 2017-01-15T02:25:50.307 回答