如何在 Highcharts 散点图上正确对齐 Font Awesome 符号？

Question

使用 Highcharts example posted here 如何确保 Font Awesome 图标像原生 symbols/markers 一样准确定位在数据点的中间？它在数据系列中被这样调用，并使用在相同 Fiddle:

中找到的 "plugin"

marker: {
    symbol: 'text:\uf183' // fa-male
}

使用该示例，如果您切换系列 on/off 几次或缩放 in/out，图标在视觉上不再准确，通常显示在实际坐标上方。在下图中，根据图标所在的位置，您会认为数据点的值大于 50。

他们的SVGRenderer example here似乎没有受到影响。

Answer 1

稍后重新呈现图标似乎有问题 - 未考虑标记的高度。我建议更改一些渲染图标的逻辑：

        var text = symbol.split(':')[1],
            svgElem = this.text(text, x, y)
            .attr({
                translateY: h, // translate marker
                translateX: -1
            })
            .css({
                fontFamily: 'FontAwesome',
                fontSize: h * 2
            });

查看演示：http://jsfiddle.net/2A7Zf/29/

Answer 2

如果您想为自定义图表使用 XL 尺寸（即更大的半径）的标记（例如，Yes/No 使用 x 和复选图标的流行率图表，为不太流行的图表圈空并圈出填充了更普遍的一个和显示计数/%s 的数据标签），那么我建议进行此调整以使符号居中：

          translateX:  -w/2 + options.radius/4 - 3

如何在 Highcharts 散点图上正确对齐 Font Awesome 符号？

How to properly align Font Awesome symbols on Highcharts scatter plots?

highcharts

font-awesome

scatter-plot