javascript - 带有图标标记插件的 Highcharts 不会渲染 FontAwesome 点

Question

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

我正在尝试将相同的内容合并到我正在处理的项目中，但是当我向图表添加一个点时(通过手动更改单个 data 中的 series 对象或通过调用系列'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 自己的示例和我的代码进行一些比较，发现我的系列缺少 Graphic 对象:

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/