javascript - 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

},

这是图表

导出的图表

问题是工具提示样式已损坏。图像中不需要工具提示 [悬停]

如何在导出中排除工具提示。尝试了很多。没有得到任何解决方案。

这不适用 ti labelFormatter ref

它适用于具有以下代码的默认导出按钮

    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; 
        }
    });

},

标签： javascriptgraphhighchartsvue-component

Answer 1

labelFormatter您可以为导出的图表定义一个单独的函数：

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

---

现场演示：http: //jsfiddle.net/BlackLabel/p1wovduy/1/

API 参考： https ://api.highcharts.com/highcharts/exporting.chartOptions