具有图标标记插件的Highcharts无法呈现FontAwesome点

詹姆斯·唐纳利

Highcharts的示例之一就是这个JSFiddle演示,它提供了一个插件,该插件允许FontAwesome图标呈现为图表上的点。

我正在尝试将相同的内容合并到我正在处理的项目中,但是当我在图表中添加一个点时(通过手动更改data个体内的对象series或通过调用系列的addPoint方法),该点不会出现。但是,轴确实会更新。

JSFiddle示例

在这个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]

我在这里做错了什么?

罗伯·施穆克(Rob Schmuecker)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

fontawesome图标在Chrome和Firefox中无法呈现相同的效果

来自分类Dev

无法通过cdn.fontawesome.com呈现Font Awesome图标

来自分类Dev

自托管 FontAwesome 图标无法在 OS X Sierra 上呈现

来自分类Dev

具有对齐的fontawesome图标的多行listitem

来自分类Dev

具有对齐的fontawesome图标的多行listitem

来自分类Dev

具有<a>标记的link_to标记内的图标

来自分类Dev

highcharts图例标记和具有不同大小的系列标记

来自分类Dev

禁用点标记时,无法在Highcharts中设置“选定”状态

来自分类Dev

自定义FontAwesome图标不呈现

来自分类Dev

具有链接的.png的SVG无法呈现

来自分类Dev

具有多个标记的Mapbox地图不会呈现

来自分类Dev

地图标记无法呈现-Phonegap中的Google Maps Javascript API v3

来自分类Dev

无法删除具有“重新分析点缓冲区中存在的标记无效”的文件夹

来自分类Dev

将具有动态参数的函数绑定到Highcharts点

来自分类Dev

脚本标记无法同步呈现

来自分类Dev

无法在FontAwesome React中显示检查图标

来自分类Dev

bootstrap fontawesome 图标无法正常工作

来自分类Dev

第一次未加载带有毕加索的地图标记点图像

来自分类Dev

Fontawesome 图标 SVG 未在 Firefox 中显示为 Heremap 标记

来自分类Dev

没有出现react-fontawesome图标

来自分类Dev

带有 FontAwesome 图标的中心文本

来自分类Dev

rCharts和highcharts具有闪亮的情节无法正确更新

来自分类Dev

IE 11中无法呈现Highcharts

来自分类Dev

如何在谷歌地图上添加具有不同图标的标记?

来自分类Dev

表单类无法呈现HTML标记-Laravel

来自分类Dev

jQuery表单插件:仅当表单具有enctype标记时,如何显示进度栏

来自分类Dev

Highcharts-在单个值上显示标记图标

来自分类Dev

Highcharts-线图标记渲染不可靠?

来自分类Dev

如何更改HighCharts.js散点图标记位置

Related 相关文章

  1. 1

    fontawesome图标在Chrome和Firefox中无法呈现相同的效果

  2. 2

    无法通过cdn.fontawesome.com呈现Font Awesome图标

  3. 3

    自托管 FontAwesome 图标无法在 OS X Sierra 上呈现

  4. 4

    具有对齐的fontawesome图标的多行listitem

  5. 5

    具有对齐的fontawesome图标的多行listitem

  6. 6

    具有<a>标记的link_to标记内的图标

  7. 7

    highcharts图例标记和具有不同大小的系列标记

  8. 8

    禁用点标记时,无法在Highcharts中设置“选定”状态

  9. 9

    自定义FontAwesome图标不呈现

  10. 10

    具有链接的.png的SVG无法呈现

  11. 11

    具有多个标记的Mapbox地图不会呈现

  12. 12

    地图标记无法呈现-Phonegap中的Google Maps Javascript API v3

  13. 13

    无法删除具有“重新分析点缓冲区中存在的标记无效”的文件夹

  14. 14

    将具有动态参数的函数绑定到Highcharts点

  15. 15

    脚本标记无法同步呈现

  16. 16

    无法在FontAwesome React中显示检查图标

  17. 17

    bootstrap fontawesome 图标无法正常工作

  18. 18

    第一次未加载带有毕加索的地图标记点图像

  19. 19

    Fontawesome 图标 SVG 未在 Firefox 中显示为 Heremap 标记

  20. 20

    没有出现react-fontawesome图标

  21. 21

    带有 FontAwesome 图标的中心文本

  22. 22

    rCharts和highcharts具有闪亮的情节无法正确更新

  23. 23

    IE 11中无法呈现Highcharts

  24. 24

    如何在谷歌地图上添加具有不同图标的标记?

  25. 25

    表单类无法呈现HTML标记-Laravel

  26. 26

    jQuery表单插件:仅当表单具有enctype标记时,如何显示进度栏

  27. 27

    Highcharts-在单个值上显示标记图标

  28. 28

    Highcharts-线图标记渲染不可靠?

  29. 29

    如何更改HighCharts.js散点图标记位置

热门标签

归档