Добавьте легенду в jVectorMap

Я обновляю наше приложение, чтобы использовать jVectorMap вместо Flash. На некоторых картах страны должны быть окрашены по-разному. Это довольно просто создать.

<div id="world-map-color" style="width: 900px; height: 600px;"></div>
<script>
    var myData = {
                  "AF": 36.63,
                  "RU": 11.58,
                  "US": 158.97
                 };

    $('#world-map-color').vectorMap({
        backgroundColor: "#FFFFFF",
        regionStyle: {
            initial: { fill: "#7C96A1" },
            hover: { fill: "#A0D1DC" }
        },
        series: {
            regions: [{
                values: myData,
                scale: ['#B0ADF7', '#0D0885'],
                normalizeFunction: 'polynomial'
            }]
        }
    });
</script>

Получившаяся карта:

Цветная карта

Тем не менее, я хотел бы добавить какую-то легенду/ключ, чтобы сказать, какова шкала цветов. Что-то вроде следующего:

Пример названия

Кроме того, эта примерная легенда (из Flash) позволяла пользователю изменять масштабирование цветов с помощью стрелок вверху. Так что было бы неплохо, если бы и это было возможно.

Кто-нибудь знает, возможны ли какие-либо части из них?


person Snowy Coder Girl    schedule 31.10.2012    source источник


Ответы (1)


Самая основная вещь, которую необходимо достичь, — это создание цветовой шкалы. Для этого см. аналогичный вопрос. ответил недавно.

person bjornd    schedule 31.10.2012
comment
+1 Спасибо. Я предполагаю, что это означает, что это не родная функция для отображения легенды? (Я полагаю, что вы являетесь автором jVectorMap? Кстати, очень хорошее приложение). - person Snowy Coder Girl; 01.11.2012
comment
@R Пока нет, но у меня есть планы реализовать эту функцию в одной из следующих версий. - person bjornd; 02.11.2012
comment
Прохладный! О, кстати, есть ли способ легко получить наименьшее и наибольшее значения в регионе (например, самые большие и наименьшие значения в myData выше — это будут 11,58 и 158,97)? - person Snowy Coder Girl; 02.11.2012
comment
@Рэйчел Г. Попробуйте map.series.regions[0].scale.minValue и map.series.regions[0].scale.maxValue - person bjornd; 02.11.2012
comment
Работал с функцией нормализации линейного. Тай - person Snowy Coder Girl; 05.11.2012