带有图标标记插件的 Highcharts 没有呈现 FontAwesome 点

Question

Highcharts 的示例之一是this JSFiddle demo，它提供了一个插件，允许将 FontAwesome 图标呈现为图表上的点。

我正在尝试将相同的东西合并到我正在处理的项目中，但是当我向图表添加一个点时（通过手动更改单个 series 中的 data 对象或调用系列'addPoint 方法）这一点没有出现。然而，轴确实得到了更新。

JSFiddle example.

在这个 JSFiddle 示例中，我在顶部包含了插件，为图表提供了一些基本的默认选项来填充轴，然后尝试添加一些点。以下是此示例中的相关代码：

// Generate the event series if undefined
if (typeof eventChartOptions.options.series == 'undefined')
    eventChartOptions.options.series = [];

// Populate the event series based on data in events object
eventChartOptions.options.series.push(
    {
        data: [[174.0, 65.6]],
        marker: {
            symbol: 'text:\uf183' // fa-male
        },
        icon: '\uf183',
        name: 'Male',
        color: 'rgba(119, 152, 191, 0.6)'
    }
);

eventChart = new Highcharts.Chart(eventChartOptions.options);

在呈现的图表上，yAxis 被更新以包含新值（174），但图标无处可见：

对 Highcharts 自己的示例和我的代码进行一些比较，发现我的系列缺少一个图形对象：

Highcharts 系列点阵（工作）

points: Array[35]
    0: Ea
        category: 161.2
        clientX: 222.50362775079438
        graphic: G
            added: true
            element: text
            parentGroup: G
            parentInverted: undefined
            renderer: ta
            stroke: "#FFFFFF"
            stroke-width: 0
            styles: Object
            textStr: ""
            textWidth: undefined
            xSetter: function (a,b,c){var d=c.getElementsByTagName("tspan"),
            __proto__: Object
        negative: false
        options: Object
            x: 161.2
            y: 51.6
            __proto__: Object
        plotX: 222.50362775079438
        plotY: 179.77142857142854
        pointAttr: Array[0]
        series: c
        x: 161.2
        y: 51.6
        yBottom: null
        __proto__: Object

我的系列点数组（不工作）

points: Array[1]
    0: Ea
        category: 174
        clientX: 112.5
        negative: false
        options: Object
            x: 174
            y: 65.6
            __proto__: Object
        plotX: 112.5
        plotY: 275339.2173783309
        pointAttr: Array[0]
        series: c
        x: 174
        y: 65.6
        yBottom: null
        __proto__: Object
        length: 1
        __proto__: Array[0]

我在这里做错了什么？

Answer 1

我认为您尝试放置图标的 x 轴的数据不正确。

你一直在使用

// Populate the event series based on data in events object
    eventChartOptions.options.series.push(
        {
            data: [[174.0, 65.6]] ,
            marker: {
                symbol: 'text:\uf183' // fa-male
            },
            icon: '\uf183',
            name: 'Male',
            color: 'rgba(119, 152, 191, 0.6)'
        }
    );

这表示65.4 的值远不接近为其他轴定义的范围，例如1390219200000

改成

// Populate the event series based on data in events object
eventChartOptions.options.series.push({
    data: [
        [174.0, 1390219200000]
    ],
    marker: {
        symbol: 'text:\uf183' // fa-male
    },
    icon: '\uf183',
    name: 'Male',
    color: 'rgba(119, 152, 191, 0.6)'
});

虽然是 90 度，但会渲染这个人吗？！

演示：http://jsfiddle.net/robschmuecker/yc3Tg/1/