Highcharts - 如何删除空项目上的向下钻取链接？答案

【问题标题】：Highcharts - How to remove drilldown link on empty items?Highcharts - 如何删除空项目上的向下钻取链接？
【发布时间】：2016-10-10 10:51:28
【问题描述】：

我正在使用 Highcharts Stacked 列，当某些项目为空时，我需要删除向下钻取链接。

前提条件：

当某些项目为空时使用值 0 或 null，因为需要对图表列进行排序。
某些列可能具有向下钻取功能，而另一些则没有，具体取决于数据。

请参考 jsfiddle 示例： http://jsfiddle.net/tsenffor/

如何重现：

在图表下方，取消选中“CCC”标签。
请注意，“名称 4 列”没有值，但启用了向下钻取链接。请参见下图。

如果可能隐藏空列，但我仍然需要在代码中将此值设置为 0 或 null，因为列排序。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Highchart test'
            },
            stackLabels: {
              enabled: true,
              style: {
              	fontWeight: 'bold'
            	}
           }
        },
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'AAA',
            data: [{
                name: 'Name 1',
                y: 5,
                drilldown: 'Name1AAA'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 2
            }, {
                name: 'Name 2',
                y: 2
            }]
        }, {
            name: 'BBB',
            data: [{
                name: 'Name 1',
                y: 10,
                drilldown: 'Name1BBB'
            }, {
                name: 'Name 4',
                y: 0
            }, {
                name: 'Name 3',
                y: 0
            }, {
                name: 'Name 2',
                y: 5
            }]
        }, {
            name: 'CCC',
            data: [{
                name: 'Name 1',
                y: 4,
                drilldown: 'Name1CCC'
            }, {
                name: 'Name 4',
                y: 12,
                drilldown: 'Name4CCC'
            }, {
                name: 'Name 3',
                y: 8
            }, {
                name: 'Name 2',
                y: 1
            }]
        }],
        
        drilldown: {
            series: [{
                name: 'Name 1 - AAA',
                id: 'Name1AAA',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - BBB',
                id: 'Name1BBB',
                data: [
                    ['Name 1/1', 7],
                    ['Name 1/2', 2],
                    ['Name 1/3', 1],
                ]
            }, {
                name: 'Name 1 - CCC',
                id: 'Name1CCC',
                data: [
                    ['Name 1/1', 2],
                    ['Name 1/2', 3],
                    ['Name 1/3', 4],
                ]
            }, {
                name: 'Name 4 - CCC',
                id: 'Name4CCC',
                data: [
                    ['Name 4/1', 4],
                    ['Name 4/2', 5],
                    ['Name 4/3', 3],
                ]
            }]
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

有没有办法做到这一点？

谢谢！

【问题讨论】：

您不能删除下钻选项吗？或者那是你不想做的事情？即删除drilldown: 'Name1CCC'
如果删除向下钻取将停止工作...

标签： javascript jquery highcharts

【解决方案1】：

我们可以使用drilldown选项来控制drilldown。

 drilldown: {
//for axis label
        activeAxisLabelStyle: {
            textDecoration: 'none',
            fontStyle: 'italic'
        },
//for datalabel
        activeDataLabelStyle: {
            textDecoration: 'none',
            fontStyle: 'italic'
        }
}

Reference:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/

【讨论】：

【解决方案2】：

要删除 x 轴标签的链接，请使用：

Highcharts.Tick.prototype.drillable = function () {};

看这个：

http://jsfiddle.net/tsenffor/3/

【讨论】：