带有向下钻取的 Highcharts 柱形图,从 x 轴标签中删除类似格式的超链接

Rah*_*pta 5 javascript jquery charts graph highcharts

我使用column chartdrilldown。这是我的JSFIDDLE

现在我的问题是:

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

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

xAxis: {
         type: 'category',
         labels:{
               style:{
                    color: 'red',
                    textDecoration:"none"
               }
         } 
      },
Run Code Online (Sandbox Code Playgroud)

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

plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%',
                            style:{
                               color: 'blue',
                               textDecoration:"none"
                            }
                        }
                    }
                }
Run Code Online (Sandbox Code Playgroud)

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

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

任何帮助将不胜感激 !

san*_*ari 5

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

 drilldown: {
//for axis label
        activeAxisLabelStyle: {
            textDecoration: 'none',
            fontStyle: 'italic'
        },
//for datalabel
        activeDataLabelStyle: {
            textDecoration: 'none',
            fontStyle: 'italic'
        }
}
Run Code Online (Sandbox Code Playgroud)

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


Seb*_*han 4

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

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);
Run Code Online (Sandbox Code Playgroud)