Highcharts柱状图与下钻，删除超链接，如格式化从x轴标签

Question

我使用column chart与drilldown。这是我的JSFIDDLE。

现在我的问题是:

• 我想从x轴上的标签中删除超链接，如格式和dataLabels

你可以从我的小提琴中注意到，我已经尝试过在x轴标签上应用格式，使用如下代码:

xAxis: {
         type: 'category',
         labels:{
               style:{
                    color: 'red',
                    textDecoration:"none"
               }
         } 
      },

，并使用以下代码格式化数据标签:

plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%',
                            style:{
                               color: 'blue',
                               textDecoration:"none"
                            }
                        }
                    }
                }

但问题是:格式化只适用于x轴标签和dataLabels ，没有钻取数据。虽然它适用于所有的x轴标签和数据标签的钻取数据!

有用的参考资料:http://api.highcharts.com/highcharts#xAxis.labels.stylehttp://api.highcharts.com/highcharts series.data.dataLabels

Answer 1

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

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

[参考:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/] [1]

Answer 2

您需要覆盖钻取功能，以避免向标签添加操作。

http://jsfiddle.net/phpdeveloperrahul/FW64T/

 (function (H) {
    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;
        if (point.drilldown) {
            // Add the click event to the point label
            H.addEvent(point, 'click', function () {
                point.doDrilldown();
            });
            // Make axis labels clickable
            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;
                    }
                });
            }
        } else if (tickLabel && tickLabel._basicStyle) {
        }
        return point;
    });
})(Highcharts);

Answer 3

也可以使用css

.highcharts-drilldown-axis-label{
text-decoration: none !important;
}

Answer 4

{...
series: [],
drilldown: {
    activeAxisLabelStyle: {
        cursor: 'default',
        color: '#3E576F',
        fontWeight: 'normal',
        textDecoration: 'none'
    },
    activeDataLabelStyle: {
        cursor: 'default',
        color: '#3E576F',
        fontWeight: 'normal',
        textDecoration: 'none'
    }
}
}

Answer 5

在下拉列表中输入

activeAxisLabelStyle: {
    cursor: 'pointer',
    color: '#0d233a',
    fontWeight: 'bold',
    textDecoration: 'none'          
}

Answer 6

如果您有一个图表，其中只有选定的列有钻取，则需要修改Sebastian Bochan的答案，以便所有列都具有相同的标签:

(function (H) {
            //DATALABELS
            H.wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
                var css = this.chart.options.drilldown.activeDataLabelStyle;
                proceed.call(this);
                css.textDecoration = 'none';
                css.fontWeight = 'normal';
                css.cursor = 'default';
                css.color = 'blue';
                H.each(this.points, function (point) {
                    if (point.dataLabel) { // <-- remove 'point.drilldown &&' 
                        point.dataLabel
                            .css(css)
                            .on('click', function () {
                                return false;
                            });
                    }
                });
            });
        })(Highcharts);

还要注意这些设置是全局的，因此也会影响您可能拥有的任何其他图表。