Highcharts：从导出的图例中删除自定义图例工具提示。

Question

以下是代码

legend: {
    width: 500,
    itemWidth: 250,
    layout: 'horizontal',
    backgroundColor: '#FFFFFF',
    align: 'left',  
    alignColumns:false,                     
    verticalAlign: 'top',
    margin:10,
    itemMarginLeft :2,
    x: 0,
    y:0,
    itemDistance: 2,
    symbolHeight : 10,
    symbolWidth : 10,
    itemStyle : {
        "fontFamily": "'Raleway', sans-serif !important",
        "fontSize"  : "12px !important",
    },
    title : {
        text : null
    },
    useHTML: true,
    labelFormatter: function() {
        var total = 0;
        for(var i=this.yData.length; i--;) { total += this.yData[i]; };
        if ((this.options.custom == "undefined") || (this.options.custom == undefined)) {
            return  '<span class="legend-tooltip">'+total.toLocaleString('en') + " " + this.name.toLowerCase();
        }
        else{
            var color= this.options.custom.type == '+' ? '#8ed64b' : '#ff0112';
            //return  '<span class="legend-tooltip">'+total.toLocaleString('en') + " " + this.name.toLowerCase()  + ' ' + '<span style="color: '+color+'" title="Change from previous period" >'+this.options.custom.change+"</span>";                                          
            return '<span class="legend-tooltip">'+total.toLocaleString('en') + ' ' + this.name.toLowerCase()  + ' ' + '<span class="tooltip-item" style="color: '+color+'">'+this.options.custom.change+'<span class="tooltip-expand-box">Change from previous period</span></span></span>';
        }   
    },
    itemMarginBottom :10

},

而这是图表

导出的图表

问题是工具提示的样式被破坏了，不需要在图片中使用工具提示[hover] 。

如何在导出时排除tooltip.Tried了很多，没有得到任何解决方案。

这不适用于labelFormatter 档号

使用下面的代码，默认的导出按钮可以正常工作

    legend: {
    title : {
        text : "",
    },
    layout: 'horizontal',
    align: 'left',
    verticalAlign: 'top',
    y : 10,
    x:0,
    useHTML: true,
    labelFormatter: function() {
        var total = 0;
        for(var i=this.yData.length; i--;) { total += this.yData[i]; };
        if ((this.options.custom == "undefined") || (this.options.custom == undefined)) {
            return  '<span class="legend-tooltip">'+total.toLocaleString('en') + " " + this.name.toLowerCase();
        }
        else{
            var color= this.options.custom.type == '+' ? '#8ed64b' : '#ff0112';
            return '<span class="legend-tooltip">'+total.toLocaleString('en') + ' ' + this.name.toLowerCase()  + ' ' + '<span class="tooltip-item" style="color: '+color+'">'+this.options.custom.change+'</span></span>';
        }

    },

},

但不能用于自定义导出按钮

    openMediaShareModal(option,index){
    var self = this;
    var ref = this.$refs[index];
    var chart = ref[0].chart;   
    var obj = {};
    var itemURL;
    var exportUrl = 'https://export.highcharts.com/';
    obj.svg = chart.getSVG(option);
    obj.options = JSON.stringify(option);
    obj.type = 'image/png';
    obj.async = true;
    $.ajax({
        type: 'post',
        url: exportUrl,
        data: obj,
        success: function(data) { 
            var itemURL = 'https://export.highcharts.com/'+data; 
            self.popup_item.image_url = itemURL; 
        }
    });

},

Answer 1

你可以定义一个单独的 labelFormatter 函数导出的图表。

    exporting: {
        chartOptions: {
            legend: {
                labelFormatter: function() {
                    ...
                }
            }
        }
    }

---

实时演示。 http:/jsfiddle.netBlackLabelp1wovduy1。

API参考。 https:/api.highcharts.comhighchartsexporting.chartOptions。