Show individual names in legend
Question
I'd like to show the city names in the legend of the map. When I add the 'name' parameter, it will only show one. I do have my own dataset but it's tied to a SQL server so I'm using plotly's example code but still can't get it to appear there.
https://codepen.io/anon/pen/LKrLRa
Here in the data, I added the 'name' array:
var data = [{
type: 'scattergeo',
mode: 'markers+text',
text: [
'Montreal', 'Toronto', 'Vancouver', 'Calgary', 'Edmonton',
'Ottawa', 'Halifax', 'Victoria', 'Winnepeg', 'Regina'
],
lon: [
-73.57, -79.24, -123.06, -114.1, -113.28,
-75.43, -63.57, -123.21, -97.13, -104.6
],
lat: [
45.5, 43.4, 49.13, 51.1, 53.34, 45.24,
44.64, 48.25, 49.89, 50.45
],
marker: {
size: 7,
color: [
'#bebada', '#fdb462', '#fb8072', '#d9d9d9', '#bc80bd',
'#b3de69', '#8dd3c7', '#80b1d3', '#fccde5', '#ffffb3'
],
line: {
width: 1
}
},
name: [
'Montreal', 'Toronto', 'Vancouver', 'Calgary', 'Edmonton',
'Ottawa', 'Halifax', 'Victoria', 'Winnepeg', 'Regina'
]
}];
Here in the layout, add the showlegend: true
var layout = {
title: 'Canadian cities',
showlegend: true,
font: {
family: 'Droid Serif, serif',
size: 6
},
titlefont: {
size: 16
},
geo: {
scope: 'north america',
resolution: 50,
lonaxis: {
'range': [-130, -55]
},
lataxis: {
'range': [40, 70]
},
showrivers: true,
rivercolor: '#fff',
showlakes: true,
lakecolor: '#fff',
showland: true,
landcolor: '#EAEAAE',
countrycolor: '#d3d3d3',
countrywidth: 1.5,
subunitcolor: '#d3d3d3'
}
};
1 answers
solution1
1 ACCPTED 2019-07-07 16:44:48
Here your data list should consist of separate objects to show multiple legends. Here I tried with 3 objects in data and there are 3 legends. So you should make your data list correctly.
var data = [{ type: 'scattergeo', mode: 'markers+text', text: [ 'Montreal' ], lon: [-73.57], lat: [ 45.5 ], marker: { size: 7, color: [ '#bebada' ], line: { width: 1 } }, name: 'Montreal', textposition: [ 'top right' ], }, { type: 'scattergeo', mode: 'markers+text', text: [ 'Toronto' ], lon: [-79.24], lat: [ 43.4 ], marker: { size: 7, color: [ '#fdb462' ], line: { width: 1 } }, name: 'Toronto', textposition: [ 'top left' ], }, { type: 'scattergeo', mode: 'markers+text', text: [ 'Vancouver' ], lon: [-123.06], lat: [ 49.13 ], marker: { size: 7, color: [ '#fb8072' ], line: { width: 1 } }, name: 'Vancouver', textposition: [ 'top center' ], }]; var layout = { title: 'Canadian cities', showlegend: true, font: { family: 'Droid Serif, serif', size: 6 }, titlefont: { size: 16 }, geo: { scope: 'north america', resolution: 50, lonaxis: { 'range': [-130, -55] }, lataxis: { 'range': [40, 70] }, showrivers: true, rivercolor: '#fff', showlakes: true, lakecolor: '#fff', showland: true, landcolor: '#EAEAAE', countrycolor: '#d3d3d3', countrywidth: 1.5, subunitcolor: '#d3d3d3' } }; Plotly.newPlot('myDiv', data, layout, { showSendToCloud: true });
<head> <!-- Plotly.js --> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <!-- Plotly chart will be drawn inside this DIV --> <div id="myDiv"></div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.