首页 文章

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

提问于
浏览 次
0

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

我工作了'm trying to incorporate the same thing on a project I'但是当我向图表添加一个点时（通过手动更改单个 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），但图标无处可见：

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]

我在这做错了什么？

javascript highcharts font-awesome

1 回答

  • 2

    我认为您试图放置图标的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/

    回复于

相关问题