Создание вертикальной легенды в datamaps

Question

Я использую DataMaps, чтобы сделать choropleth, но у меня проблемы с изменением легенды. Я бы хотел, чтобы легенда была вертикальной и справа от карты. Документация неясно, как это сделать. Как создать легенду сложенной/вертикальной?

Я использовал следующий код для создания легенды:

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

Here's my jsfiddle example.

Answer 1

Я не думаю, есть опция для горизонтальной легенды в данных. Я использовал его для проекта и в итоге переписал функцию легенды, чтобы соответствовать требованиям. Я смог получить легендарный стек/вертикальный и справа от карты с CSS. Цвета и значения не выровнены. Если значения являются статическими, вы можете выровнять их путем таргетинга на определенные элементы dt/dd (: nth-child или: nth-of-type) и добавление отступов по мере необходимости. Если значения являются динамическими, вам понадобится более умное решение. Я добавил css для .datamaps-legend dt и модифицировал верхнюю часть в .datamaps-legend. Пример в fiddle

.datamaps-legend dt{ 
    clear:both; 
} 
.datamaps-legend { 
    color: white; 
    right: -100px; 
    top: 128px; 
    position: relative; 
    display: inline-block; 
    text-align: center; 
}