Highcharts Legend自定义HTML

Question

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

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

使用highcharts是否有一种简单的方法可以做到这一点，或者我是否正在使用将进入并添加我想要的html的高亮事件挂钩编写我自己的函数？

感谢任何帮助。 谢谢！

Answer 1

当你想在任何类型的标签/工具提示中使用html时，你需要将useHTML设置为true（不在文档中：/）。它在posistioning中给出了一些问题但可以渲染任何html。

示例

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

Answer 2

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

Answer 3

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

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

http://api.highcharts.com/highcharts/legend.useHTML

Answer 4

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

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

这些框以html呈现，具有确切位置，因此它们显示在图例项旁边。图例本身就是图表SVG的一部分，因此很难在其中获取其他html。

如果你想要所有的代码 - 留下评论，我会发布。