javascript - 导出 Highcharts 时无法根据需要禁用图例标题/启用图例标题

Question

我正在使用“highcharts”：“^6.1.2”，我修改了这样的图例标题

legend: {
    layout: 'horizontal',
    backgroundColor: '#FFFFFF',
    align: 'left',                      
    verticalAlign: 'top',
    margin:35,
    x: 90,
    y:-25,
    itemDistance: 50,
    symbolHeight : 17,
    symbolWidth : 17,
    itemStyle : {
        "fontFamily": "'Raleway', sans-serif !important",
        "fontSize"  : "14px !important",
    },
    title : {
        text : "Filter by :",
        style : {
            "fontFamily": "'Raleway', sans-serif !important",
            "fontSize" : "1rem !important",
            "color" : "#5d737e !important", 
            "fontWeight": "500 !important",
        }
    }
},

也加载为

chart: {
    type: 'area',
    events: {
        load: function(e) { 
            var title = this.legend.title;
            title.translate(-83, 27);
        },
        redraw: function(e) { 
            var title = this.legend.title;
            title.translate(-83, 27);
        },
    }
},

我需要下载并共享此图表，因为我添加了自定义按钮并使用了导出模块。

exporting: {
    chartOptions: {
    chart:{
        events: {
            load: function(e) { 
                var title = this.legend.title;
                title.translate(-83, 27);
            },
            redraw: function(e) { 
                var title = this.legend.title;
                title.translate(-83, 27);
            },
        }
    },
    legend: {
        layout: 'horizontal',
        backgroundColor: '#FFFFFF',
        align: 'left',                      
        verticalAlign: 'top',
        margin:35,
        x: 90,
        y:-25,
        itemDistance: 50,
        symbolHeight : 17,
        symbolWidth : 17,
        itemStyle : {
            "fontFamily": "'Raleway', sans-serif !important",
            "fontSize"  : "14px !important",
        },
        title : {
            text : "Filter by :",
            style : {
                "fontFamily": "'Raleway', sans-serif !important",
                "fontSize" : "1rem !important",
                "color" : "#5d737e !important", 
                "fontWeight": "500 !important",
            }
        }
      }
    }
}

但是导出时图例标题显示不正确。它不会在自定义点击时应用。但如果我使用默认下载选项，则可以工作

这是js小提琴链接

查看图例标题位置

标签： javascriptjqueryhtmlgraphhighcharts

Answer 1

您不能使用JSON.stringify这些功能。您需要将图表发布为svg：

$("#download").click(function() {
    var obj = {};
    ...

    obj.svg = chart.getSVG(chart.options);
    ...

});

现场演示： https ://jsfiddle.net/BlackLabel/u739oknb/

API 参考： https ://api.highcharts.com/class-reference/Highcharts.Chart#getSVG