Highcharts Legend自定义HTML

问题描述:

我有一个highcharts图,我正在寻找收集用户关于每条线图的一些数据。我试图让一个文本输入框带有一个与系列名称相关的id或名称,以便在图例中的每个标签旁出现。然后我可以有一个按钮和代码将收集的数据提交到其他地方的服务器。Highcharts Legend自定义HTML

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

有没有一种简单的方法与highcharts做到这一点还是我在看使用highchart事件挂钩,将去并添加我想要的HTML写我自己的功能?

任何帮助表示赞赏。 谢谢!

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

我结束了延伸的highstock源代码和复制其showCheckbox代码是一个showTextbox代码。这不是一个非常通用的解决方案,但它解决了我的特殊问题。我还必须修改onmousedown处理程序,以便在单击时将焦点传递给文本框。所以他们旁边会出现图例项

这些箱子被呈现在准确的位置HTML。图例本身就是图的SVG的一部分,这使得在其中获得其他html相当困难。

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

+0

你好Tom,你能否告诉我你是如何延高的股票来源。我确实需要更改图例渲染。 – 2012-08-14 11:27:42

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

+0

我登陆此帖子搜索自定义工具提示。它有助于创建SVG元素。非常感谢。 +1为小提琴链接。 – 2012-08-14 06:20:11

当你想在任何类型的标签工作的HTML /工具提示你需要useHTML设置为true(而不是在文件:/)。它在posistioning中给出了一些问题,但可以呈现任何html。

例如

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

可以Highcharts传奇的useHTML选项设置为true

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

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