high charts柱状图点击X轴事件

high charts柱状图点击X轴事件

function (c) {
                c.xAxis[0].labelGroup.element.children[0].style.fill= '#00BBFF'
                // console.log("shuchu ");
                Highcharts.addEvent(c.xAxis[0].labelGroup.element, 'click', e => {
                    // 这里面写点击事件具体执行内容
                    that.handleEle(0, '', [])
                    e = c.pointer.normalize(e);
                    let index = Math.round(c.xAxis[0].toValue(e.chartY));
                    var i=0
                    for(i;i<6;i  ){
                        c.xAxis[0].labelGroup.element.children[i].style.fill= '#EFF6FF'
                    }
                    c.xAxis[0].labelGroup.element.children[index].style.fill= '#00BBFF'
                    // console.log("c.xAxis[0].labels",c.xAxis[0].labelGroup.element.children[index].style.color);
                    that.handleEle(index, c.xAxis[0].categories[index], that.nameList[index].data)
                   
                })
            }

initChart() {
            let that = this
            this.chart = Highcharts.chart("mychart", {
                chart: {
                    type: 'bar', //图表类型
                    backgroundColor: "rgba(2, 16, 67, 0)",//图表背景色设置为透明
                    style: {
                        color: "#fff"
                    }
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: ['山东', '陕西', '河南', '湖南', '湖北', '内蒙古'], //X轴内容
                    title: {
                        text: null
                    },
                    //X轴坐标值样式
                    labels: {
                        style: {
                            color: "#EFF6FF",
                            fontSize: "14px",
                            fontWeight: "400",
                            fontFamily: 'Source Han Sans CN',
                            backgroundColor:'red',
                            cursor: 'pointer'
                        },
                yAxis: {
                    min: 0,
                    title: {
                        text: '',
                        align: 'high' //Y轴单位位置
                    },
                    //Y轴坐标值内容的样式设置
                    labels: {
                        style: {
                            color: "#F0F7FF",
                            fontSize: "14px",
                            fontWeight: "400"
                        }
                    },
                    min: 0,//最小值
                    tickInterval: 25, //间隔
                    max: 100,//最大值
                    // 设置网格线虚线等样式
                    gridLineDashStyle: "dash", //网格虚线
                    gridLineWidth: 1, //网格宽度
                    gridLineColor: "rgba(240,252,255,0.6)" //网格颜色
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true,  //柱状上没有数值显示
                            allowOverlap: true, // 允许数据标签重叠
                            formatter:function(){
                                return '<div style="width: 2px;height: 10px;background-color: #00BBFF;position: absolute;top: -5px;left: -5px;"></div>'
                            useHTML:true,
                        },
                        borderWidth: 0,
                        pointWidth: 10,
                    }
                },
                label: {
                    connectorAllowed: false
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#ffffff'),
                    shadow: true,
                    enabled: false,
                },
                

                tooltip: {
                    enabled:false
                },
                series: [{
                    data: [62, 44, 96, 87, 96, 29],
                    color: "rgba(0,187,255,0.3)",
                    
                }],
                // 去掉右下角Highcharts.com
                credits: {
                    enabled: false
                }
            }, function (c) {
                c.xAxis[0].labelGroup.element.children[0].style.fill= '#00BBFF'
                // console.log("shuchu ");
                Highcharts.addEvent(c.xAxis[0].labelGroup.element, 'click', e => {
                    // console.log(c);
                    that.handleEle(0, '', [])
                    e = c.pointer.normalize(e);
                    let index = Math.round(c.xAxis[0].toValue(e.chartY));
                    var i=0
                    for(i;i<6;i  ){
                        c.xAxis[0].labelGroup.element.children[i].style.fill= '#EFF6FF'
                    }
                    c.xAxis[0].labelGroup.element.children[index].style.fill= '#00BBFF'
                    that.handleEle(index, c.xAxis[0].categories[index], that.nameList[index].data)
                   
                })
            })
        },

这篇好文章是转载于：学新通技术网