首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Highcharts/Highmaps点悬停的光晕效果在chrome和firefox中不起作用

Highcharts/Highmaps点悬停的光晕效果在chrome和firefox中不起作用
EN

Stack Overflow用户
提问于 2015-06-30 13:00:07
回答 1查看 555关注 0票数 0

请检查下面的jsfiddle。

http://jsfiddle.net/ErU8H/537/

http://www.highcharts.com/components/com_demo/assets/demo/gfx/ gfxPath =‘var’;

var图表=新的Highcharts.Chart({

代码语言:javascript
运行
复制
chart: {
    renderTo: 'container'
},

title: {
    text: 'Pattern fill plugin demo'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

yAxis: {
    plotBands: [{
        from: 100,
        to: 200,
        color: {
            pattern: gfxPath + 'pattern3.png',
            width: 6,
            height: 6
        }
    }]
},

series: [{
    type: 'area',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    fillColor: {
        pattern: gfxPath + 'pattern1.png',
        width: 6,
        height: 6
    },
    states: {
                        hover: {
                            halo: {
                                size: 8,
                                opacity: 1,
                                zIndex:10,
                                attributes: {
                                    fill: '#ffffff',
                                    'stroke-width': 1,
                                    stroke: '#0b9de8'
                                }
                            }
                        }
                    }
}, {
    type: 'column',
    data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
    color: {
        pattern: gfxPath + 'pattern2.png',
        width: 6,
        height: 6,
        // VML only:
        color1: 'red',
        color2: 'yellow'
    }
}]

});

只有当我们使用pattern fill插件时,点悬停的光晕效果才不能在chrome和firefox中正确渲染。我不得不使用模式,同时希望在点悬停时实现光晕效果。在这方面有什么帮助吗?

EN

回答 1

Stack Overflow用户

发布于 2015-06-30 17:27:34

只需为光环设置更高的zIndexhttp://jsfiddle.net/ErU8H/542/

代码语言:javascript
运行
复制
    states: {
        hover: {
            halo: {
                attributes: {
                    zIndex: 10   
                }
            }
        }
    }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31129912

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档