javascript - 在图例中显示个人姓名-6ren

javascript - 在图例中显示个人姓名

转载作者：行者123 更新时间：2023-12-02 23:22:46

26

4

我想在 map 图例中显示城市名称。当我添加“名称”参数时，它只会显示一个。我确实有自己的数据集，但它与 SQL 服务器绑定(bind)，因此我使用了plotly 的示例代码，但仍然无法让它出现在那里。

https://codepen.io/anon/pen/LKrLRa

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

   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 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>

关于javascript - 在图例中显示个人姓名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56872962/

26

4

0

文章推荐： javascript - Joi 自定义验证

文章推荐： django-allauth Azure 广告配置

文章推荐： javascript - 如何在加载 iframe 内容后立即运行函数？

php - 如何选择与(姓名，姓氏)OR(姓氏，姓名)串联匹配的所有记录
我正在使用 ajax 实时搜索来选择名称和姓氏的串联与输入的文本匹配的所有用户，并且效果很好: $sql = "SELECT * FROM users WHERE concat(name,' ',su
javascript - 姓名、身份证件变更
我尝试建立一个注册表单。该注册表单为名为“address1”的文本框，其附近有一个名为“Add Address”的按钮。该按钮的功能 - 添加更多地址的文本框。先前地址框附近的按钮更改为“删除”，从而
javascript - 表单验证不适用于电话号码/姓名
我一直在尝试制作一个验证电话号码和姓名的表单，但无论何时输入提交，无论字段是否填写，它都只会输入相同的消息。消息不断出现，我想不通预计到达时间:http://jsfiddle.net/6W3uU/
javascript - 姓名，电子邮件验证
我正在寻找验证上的姓名和电子邮件输入的代码我希望用户名只有 A-Z , a-z并且必须有一个下划线 _ , 电子邮件应该有一个 @ .我怎样才能用 jQuery 做到这一点？表格(示例):
php - 如何在Laravel中显示 parent 姓名
我在db中有一个带有id，name和parent的部门表.parent是与父root对应的id。现在我已经显示了id（父id），但是我想显示与之对应的部门的名称我已经在Departmentcontro
SQL 查找平均得分最高的 worker 姓名
我正在尝试显示平均分最高的 worker 的姓名。我的第一个表是 worker 表并存储 worker_id 和 worker_name。第二张表是测试表，存储了参加测试的worker_id、test
winforms - 获取 parent 姓名
用什么方法或变量可以找到本例中父对象的名称？也就是说，当鼠标悬停在第一个按钮上时，获取名称 $GetParentName = "Button01"，第二个 $GetParentName = "Butt
php - 从mysql数据库获取 parent 姓名
我有一个数据库，其中一个表中有父名称。列:id、名称。以及其他表中的id、parent_id、name。在搜索字段中我输入名称。更不用说鲍勃、爱丽丝和汤姆了。我必须在数据库中搜索 child 名为鲍勃
mysql - 如何通过MYSql查询获取 parent 姓名
我有以下查询: SELECT ty.id, ty.type, ty.pid, if(ty.pid = 0, '-', (select ty.type from bid_type ty w
php - 递归获取 parent 姓名
我有一个如下所示的数据库: CREATE TABLE Persons ( id int, parentID int, name varchar(255) ); INSERT I
c++ - If语句打印 worker 姓名
我无法获得预期的结果我希望我的程序显示任何人都可以帮助我。该程序用于打印结构中列出的 worker 姓名，如果您不输入任何这些姓名，我应该打印不存在的 worker 姓名。有人可以告诉我要使用的代码/
javascript - 使用javascript从json对象获取 parent 姓名
我正在读取 JSON 对象并以表格格式名称和文本在 html 中显示它们，但无法使用 javascript 获取节点的父名称 { "A": { "B": "Text",
iPad 报亭订阅者信息(姓名、电子邮件、 zip )
当用户在我的 iPad 报亭应用上购买杂志订阅时，他们会收到分享一些信息的提示: 分享您的信息？ [此处的应用名称] 的发布者希望根据他们的隐私政策使用您的姓名、电子邮件和邮政编码。但是，我似乎无法
java - 从文本文件中提取某些值(姓名、电子邮件、电话号码)
我有一大堆电子邮件，需要从中提取信息。我最近接手了一个网站，该网站将客户的所有联系信息存储在电子邮件中。他们想要开始将其存储在数据库中。我正在使用 Java 来尝试提取这些信息。我有点陷入困境。我能
QuickBooks AccountQuery - 全名不包括 parent 姓名
我有一个使用 qbXml 和 Intuit Web 连接器与 QuickBooks 同步的应用程序。我在查询帐户时注意到一些异常行为。根据规范，一个帐户的全名应该包括它的任何祖先的名字，用冒号分隔。
pandas - 如果[姓名]列中的姓氏相似，请填写另一列的缺失值
下面是一个更大的数据框的示例。 Fare Cabin Pclass Ticket Name 257 86.5000 B77 1 110152
c# - 迭代工作列表以打印职位、姓名、雇主、职位和核心能力
我在我的 Program.cs 文件中有一个方法要实现。当该方法遍历作业列表(其中每个作业都是一个字典)时，它应该打印: ***** name: Data Scientist / Business I
mysql - 从包含 ID、姓名、薪水三列的表中查找第二高薪水
如何从包含三列的表格中查找第二高薪水，这些列是id、name、 salary，但在SELF JOIN中使用。通过嵌套查询得到答案。但是，我想知道我们如何使用 SELF JOIN 构建框架最佳答案如
php - SQL 查询选择所有没有订单、姓名、实际地址和电话号码的用户
我想在 WooCommerce 中运行 SQL 查询来选择所有没有订单、姓名、实际地址和电话号码的用户。我已经运行了以下代码，但它对我不起作用。 SELECT * FROM wp_usermeta
java - 日期-姓名 id 转换
给定(例如): Dog breeds (Name) | id Labrador Retriever | A1 German Shepherd | A2 Golden Retriever |

首页

博学

6Ren·AI

商城

javascript - 在图例中显示个人姓名