Question

我的页面上有一个下拉菜单：

<form action="/my-action/" method="post" name="selection">
    <label for="user"> User</label>
    <select id="user" name=user onclick="$(this).closest('form').submit();">
        <option>user 1</option>
        <option>user 2</option>
    </select>
</form>

我想要实现的是在图表上添加此下拉菜单，例如在图表标题旁边或图表顶部的范围选择器旁边。

我无论如何都找不到，我不知道如何处理这个，使用javascript，jQuery或html。

我感谢任何帮助。

Answer 1

我已尝试多次使用renderer.html功能在Highcharts可视化中添加下拉菜单，但遗憾的是它并不起作用。您可以看到菜单，但无法从其选项中进行选择。我猜这是因为一旦将图表绘制为SVG文件，菜单将如何呈现。

好消息是Highcharts外部的HTML元素可以与图表交互，因此您可以创建一个Javascript函数，例如，根据用户在菜单中选择的内容显示或隐藏特定系列。请参阅此处图表上方的菜单以获取示例：https://www.frbatlanta.org/chcs/labor-market-distributions.aspx。

您还可以使用renderer.html元素中的简单链接或按钮。向这些按钮添加onClick()事件以与图表进行交互。这个解决方案的用处是按钮在导出时会出现在图表旁边。当用户点击按钮时，此示例中的第一个图表会使用不同的数据重绘相同的图表：https://www.frbatlanta.org/economy-matters/2016/05/02/trade-dynamics-between-world-and-china。

我开发了这两个图表，如果您需要任何其他指导，请随时在评论中提出任何问题。

Answer 2

自从你发布这个答案后几个月......但是如果你签到了：我很想知道你在开发的那些例子中如何编写上下文按钮，特别是带有按钮的简单图表，比方说，出口/进口。

我不是一个编码人员，但是他已经在Carbon Brief上开发了基本的Highcharts内容，例如这里有一个couple examples。我看了你的代码里面有＆＃34;查看页面来源＆＃34;但很难看出哪些部分可以集中精力。

对于我们的网站，我们将图表作为单独的html编写，在GitHub上托管，然后通过iframe将其嵌入到文章页面中。我们日常无法更深入地控制网站，因为它是由外部开发人员构建的。

谢谢！西蒙

在highcharts / highstock中添加自定义下拉菜单

2 个答案: