在图例中显示个人姓名

Question

我想在地图的图例中显示城市名称。当我添加 'name' 参数时，它只会显示一个。我有自己的数据集，但它绑定到 SQL 服务器，所以我正在使用 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'
    }
};

Answer 1

此处您的数据列表应包含单独的对象以显示多个图例。在这里，我尝试使用数据中的 3 个对象，并且有 3 个图例。所以你应该正确地制作你的数据列表。

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>

在图例中显示个人姓名

Show individual names in legend

javascript

plotly

plotly.js