Question

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

我正在尝试将相同的内容合并到我正在处理的项目上，但是当我向图表添加一个点时（通过手动更改个人data中的series对象或者通过调用系列“addPoint方法”，该点不会显示。但是轴确实会更新。

在这个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），但图标无处可见：

Chart example

在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/

带有Icon Markers插件的Highcharts不会渲染FontAwesome点

Highcharts系列点阵（工作）

我的系列点阵列（不工作）

1 个答案: