javascript Highcharts Legend 自定义 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9416310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts Legend Custom HTML
提问by Tom Kiley
I have a highcharts graph and I'm looking to collect some data from the user about each line graphed. I'm trying to have a text input box with an id or a name related to the series name to appear next to each label in the legend. I could then have a button and code to submit the collected data to the server elsewhere.
我有一个 highcharts 图表，我希望从用户那里收集有关绘制的每条线的一些数据。我正在尝试在图例中的每个标签旁边显示一个带有 id 或与系列名称相关的名称的文本输入框。然后我可以有一个按钮和代码来将收集的数据提交到其他地方的服务器。
I've tried setting a labelFormatter function, but that appears to only support plain text.
我试过设置 labelFormatter 函数，但这似乎只支持纯文本。
Is there an easy way to do this with highcharts or am I looking at writing my own function using the highchart event hooks that will go in and add the html I want?
有没有一种简单的方法可以使用 highcharts 来做到这一点，或者我是否正在考虑使用 highchart 事件挂钩编写自己的函数，该挂钩将进入并添加我想要的 html？
Any help is appreciated. Thanks!
任何帮助表示赞赏。谢谢！
回答by JohnnyM
when you want working html in any type of labels/tooltips you need to set useHTML to true (not in documentation:/). It gives some problembs in posistioning but can render any html.
当您想在任何类型的标签/工具提示中使用 html 时，您需要将 useHTML 设置为 true（不在文档中：/）。它在定位方面存在一些问题，但可以呈现任何 html。
example
例子
plotOptions : {
series: {
dataLabels: {
useHTML: true
}
}
}
回答by losaliens
You can set the useHTMLoption of Highcharts legend to true.
您可以将useHTMLHighcharts 图例的选项设置为true.
legend: {
useHTML: true,
labelFormatter: function () {
return '<span title="' + this.name + '">' + this.name + '</span>';
}
}
回答by Ricardo Alvaro Lohmann
Take a look this example. http://jsfiddle.net/LCFKA/You have to set your series' data inside the loadedData and then you just have to set in the function getItemsDescription what do you want to show.
看看这个例子。 http://jsfiddle.net/LCFKA/你必须在loadedData 中设置你的系列数据，然后你只需要在函数getItemsDescription 中设置你想显示什么。
回答by Tom Kiley
So I eventually came up with a "solution" to this. I'm not sure if it's the best, but I wanted to leave a note here in case anyone else needs it.
所以我最终想出了一个“解决方案”。我不确定它是否是最好的，但我想在这里留个便条，以防其他人需要它。
I ended up extending the highstock source code and copied their showCheckbox code to be a showTextbox code. It's not a very generic solution, but it solved my particular problem. I also had to modify the onmousedown handler to allow passing focus through to the text box when it's clicked on.
我最终扩展了 highstock 源代码并将他们的 showCheckbox 代码复制为 showTextbox 代码。这不是一个非常通用的解决方案，但它解决了我的特定问题。我还必须修改 onmousedown 处理程序，以允许在单击文本框时将焦点传递到文本框。
The boxes are rendered in html with exact position so they appear next to the legend items. The legend itself is part of the SVG of the graph which makes it rather difficult to get other html in there.
这些框在 html 中以准确的位置呈现，因此它们出现在图例项旁边。图例本身是图形 SVG 的一部分，这使得在其中获取其他 html 变得相当困难。
If you'd like all the code - leave a comment and I'll post it.
如果你想要所有的代码 - 发表评论，我会发布它。
