Question

我想在地图的图例中显示城市名称。当我添加“名称”参数时，它只会显示一个。我确实有自己的数据集，但是它与SQL Server绑定在一起，所以我使用的是plotly的示例代码，但仍然无法使其显示在那里。

在数据中，我添加了“名称”数组：

   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>

在图例中显示个人名称

1 个答案: