Highcharts图例自定义HTML

Question

4

我有一个Highcharts图表，希望从用户那里收集每个折线图的一些数据。我想要在图例中的每个标签旁边显示一个文本输入框，该输入框的ID或名称与系列名称相关联。然后，我可以有一个按钮和代码将收集的数据提交到其他地方的服务器。

我尝试设置labelFormatter函数，但它似乎只支持纯文本。

是否有一种简单的方法来使用Highcharts实现这一点，还是我需要编写自己的函数，使用Highchart事件挂钩来添加所需的HTML？

任何帮助都将不胜感激。谢谢！

- Tom Kiley

4个回答

3

当你需要在任何类型的标签/工具提示中使用工作的 HTML 时，你需要将 useHTML 设为 true（不在文档中:/）。它会导致一些位置问题，但可以呈现任何 HTML。

示例：

plotOptions : {
   series: {
     dataLabels: {
       useHTML: true
     }
   }
}

- JohnnyM

2

看这个例子。 http://jsfiddle.net/LCFKA/ 你需要在loadedData中设置系列的数据，然后只需在getItemsDescription函数中设置想要显示的内容。

- Ricardo Alvaro Lohmann

我在搜索自定义工具提示时发现了这篇文章。它帮助我创建了SVG元素。非常感谢。对于提供的fiddle链接点赞。 - Hardik Mishra

1

最终，我想出了一个“解决方案”。我不确定它是否是最好的，但我想在这里留下一条注释，以防其他人需要。

最终，我扩展了highstock源代码，并将他们的showCheckbox代码复制为showTextbox代码。这不是一个非常通用的解决方案，但它解决了我的特定问题。我还必须修改onmousedown处理程序，以允许在单击文本框时将焦点传递给文本框。

这些框在HTML中呈现，具有精确的位置，因此它们会出现在图例项旁边。图例本身是图形的SVG的一部分，这使得在其中获取其他HTML变得相当困难。

如果您想要所有代码-请留下评论，我会发布它。

- Tom Kiley

嗨Tom，你能告诉我你如何扩展高库存源吗？我需要更改图例渲染。 - Hardik Mishra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- losaliens · Accepted Answer

您可以将Highcharts图例的useHTML选项设置为true。

legend: {
    useHTML: true,
    labelFormatter: function () {
        return '<span title="' + this.name + '">' + this.name + '</span>';
    }
}