Question

我有一个堆积的柱形图，可以深入到饼图。如果单击数据点，则向下钻取工作正常。但是，xAxis标签也是可点击的，它显示系列中这些点的所有饼图。不幸的是他们重叠了。

有没有办法在xAxis标签上禁用向下钻取？

$(function () {    

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },

    plotOptions: {
        column : {
            stacking : 'normal'
        }
    },

    series: [{
        name: 'On Time',
        data: [{
            name: 'Location 1',
            y: 5,
            drilldown: 'l1-ot'
        }, {
            name: 'Location 2',
            y: 2,
            drilldown: 'l2-ot'
        }, {
            name: 'Location 3',
            y: 4,
            drilldown: 'l3-ot'
        }]
    },{
        name: 'Late',
        data: [{
            name: 'Location 1',
            y: 5,
            drilldown: 'l1-l'
        }, {
            name: 'Location 2',
            y: 8,
            drilldown: 'l2-l'
        }, {
            name: 'Location 3',
            y: 6,
            drilldown: 'l3-l'
        }]
    }],
    drilldown: {
        series: [{
            type: 'pie',
            id: 'l1-ot',
            data: [
                {name: 'Widget A', y: 2},
                {name: 'Widget B', y: 3},
            ]
        }, {
            type: 'pie',
            id: 'l1-l',
            data: [
                {name: 'Widget A', y: 1},
                {name: 'Widget B', y: 4},
            ]
        }, {
            type: 'pie',
            id: 'l2-ot',
            data: [
                {name: 'Widget A', y: 1},
                {name: 'Widget B', y: 1},
            ]
        },  {
            type: 'pie',
            id: 'l2-l',
            data: [
                {name: 'Widget A', y: 2},
                {name: 'Widget B', y: 6},
            ]
        },{
            type: 'pie',
            id: 'l3-ot',
            data: [
                {name: 'Widget A', y: 1},
                {name: 'Widget B', y: 3},
            ]
        },  {
            type: 'pie',
            id: 'l3-l',
            data: [
                {name: 'Widget A', y: 3},
                {name: 'Widget B', y: 3},
            ]
        }

                ]
    }
})

}）;

Answer 1

这就是在钻取时可以使x轴标签不可点击的方法。看一下这个演示：JSFIDDLE

代码：

$(function () {    
    (function (H) {

        //For X-axis labels
        H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
            var point = proceed.call(this, series, options, x),
                chart = series.chart,
                tick = series.xAxis && series.xAxis.ticks[x],
                tickLabel = tick && tick.label;
            //console.log("series");
            //console.log(series);

            if (point.drilldown) {

                if (tickLabel) {
                    if (!tickLabel._basicStyle) {
                        tickLabel._basicStyle = tickLabel.element.getAttribute('style');
                    }
                    tickLabel.addClass('highcharts-drilldown-axis-label')          .css({
                        'text-decoration': 'none',
                        'font-weight': 'normal',
                        'cursor': 'auto'
                        }).on('click', function () {
                            if (point.doDrilldown) {
                                return false;
                            }
                        });//remove this "on" block to make axis labels clickable
                }
            } 
            else if (tickLabel && tickLabel._basicStyle) 
            {
            }

            return point;
        });
    })(Highcharts);

    // Create the chart
    $('#container').highcharts({
    .....
    .......

Highcharts向下钻取饼图 - 单击具有多个系列的轴标签会导致饼图重叠

1 个答案: