Javascript 在图例中显示单个名称

我想在地图的图例中显示城市名称。当我添加'name'参数时，它将只显示一个。我有自己的数据集，但它绑定到SQL server，所以我使用plotly的示例代码，但仍然无法将其显示在那里

在此数据中，我添加了“name”数组：

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

在布局的此处，添加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'
    }
};

---

在这里，数据列表应该由单独的对象组成，以显示多个图例。在这里，我尝试了数据中的3个对象，其中有3个图例。因此，您应该正确地制作数据列表

var数据=[{
类型：'scattergeo'，
模式：“标记+文本”，
正文：[
“蒙特利尔”
],
lon:[-73.57]，
拉丁美洲：[
45.5
],
标记：{
尺码：7，
颜色：[
"贝巴达"
],
行：{
宽度：1
}
},
名称：“蒙特利尔”，
text位置：[
“右上角”
],
}, {
类型：'scattergeo'，
模式：“标记+文本”，
正文：[
“多伦多”
],
lon:[-79.24]，
拉丁美洲：[
43.4
],
标记：{
尺码：7，
颜色：[
"fdb462"
],
行：{
宽度：1
}
},
名称：'多伦多'，
text位置：[
“左上角”
],
}, {
类型：'scattergeo'，
模式：“标记+文本”，
正文：[
“温哥华”
],
lon:[-123.06]，
拉丁美洲：[
49.13
],
标记：{
尺码：7，
颜色：[
"fb8072"
],
行：{
宽度：1
}
},
姓名：'温哥华'，
text位置：[
“顶级中锋”
],
}];
变量布局={
标题：“加拿大城市”，
传奇：没错，
字体：{
家族：'机器人衬线，衬线'，
尺码：6
},
标题字体：{
尺码：16
},
地理：{
范围：“北美”，
决议：50，
lonaxis：{
'范围'：[-130，-55]
},
车床轴：{
“范围”：[40,70]
},
肖里弗斯：没错，
rivercolor:“#fff”，
没错，
湖色：“#fff”，
秀兰：没错，
土地颜色：“#EAEAAE”，
countrycolor:“#D3”，
国家宽度：1.5，
亚单位颜色：'#D3'
}
};
Plotly.newPlot（'myDiv'，数据，布局{
showSendToCloud：对
});
太棒了，我想我试过了，可能是我的结构不对。注意，在试图弄明白这一点的时候，我偶然发现了palicate.js，它给了我更多的映射能力，所以我最终使用了它。但如果我继续使用plotly，这就解决了这个问题。