Highcharts 中文社区

查看: 1533|回复: 0

[提问贴] 如何通过点击事件弹出信息框展示多个点击点信息

[复制链接]
  • TA的每日心情
    郁闷
    2020-4-15 09:31
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    1

    帖子

    28

    积分

    HC 新手

    Rank: 1

    积分
    28
    发表于 2020-4-1 17:05:13 | 显示全部楼层 |阅读模式
    var x = 0;
    var tempx;
    var islineExist = false;
    $(function () {
            var chart = Highcharts.chart('container', {
                    plotOptions: {
                            series:{
                                    events: {
                                            click: function(e) {  
                                                    x= e.point.x;
                                                    console.log(e);
                                                    if(islineExist){
                                                            chart.xAxis[0].removePlotLine('plotline-1');
                                                    }
                                                    if(e.point.x === tempx && islineExist){
                                                            islineExist = false;
                                                            chart.xAxis[0].removePlotLine('plotline-1');
                                                    }
                                                    else{
                                                            chart.xAxis[0].addPlotLine(                               
                                                                    {color: '#FF0000',
                                                                     width: 2,
                                                                     value: x,
                                                                     id: 'plotline-1',
                                                                     label:{
                                                                             useHTML:true,
                                                                             text:'aaa'+'<br / >'+'bbb',
                                                                     }
                                                                    }
                                                            )
                                                            islineExist = true;
                                                    }
                                                    tempx = x;
                                            }
                                    }
                            }
                    },
                    xAxis: {
                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                            crosshair: {               
                                    color: '#000000',
                                    width: '1px'
                            },
                    },
                    series: [{
                            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]
                    }]
            });
    })

    例子代码如上,如图,想做到点击折线图某点展示标识线的同时像右侧展示提示框一样,将点击点的数据在标识线旁边用一个信息框展示出来,点击其他的点消失,同时展示其他点的信息.
    同时tooltip依旧在移动到其他点的时候依旧能显示,能和固定的那个点信息产生对比.
    想问下各位大神怎么样可以做到这种效果

    举例.png
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表