データマップで垂直方向の凡例を作成

Question

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

Here's my jsfiddle example.

Answer 1

私は考えていませんデータマップには水平凡例のオプションがあります。私はそれをプロジェクトに使用し、要件を満たすために凡例関数を書き直した。私は伝説をCSSを使って地図の右側に積み重ねる/垂直にすることができました。色と値は並んでいません。値が静的である場合は、特定のdt/dd（：nth-​​childまたは：nth-​​of-type）要素をターゲットにし、必要に応じて埋め込みを追加することで、それらの行を整列させることができます。値が動的な場合は、より巧妙な解決策が必要になります。 .datamaps-legend dtにcssを追加し、.datamaps-legendに変更しました。例：fiddle

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