导出绘制的图表和highchart中的原始图表设置不同

Question

我使用 Highchart 在我的页面中绘制了一些图表。我正在为我的图表设置一些属性。我发现 Highchart 使用导出来下载和保存某种类型的图表。但保存的图表的属性与原始图表不同。 例如我的原始图表是这样的：

我的代码是：

Highcharts.setOptions({ colors: color_items_array, locale: getPersianLocal()});
var chart;

$(document).ready(function() {

    chart = new Highcharts.Chart({
        exporting: {
            allowHTML:true ,
            chartOptions: {
                xAxis: {

                    labels: {
                        align: 'top',
                    }
                },
            },
            buttons: {
                contextButton: {
                    menuItems: [{
                        textKey: 'printChart',
                        onclick: function () {
                            this.print();
                        }
                    }, {
                        separator: true
                    }, {
                        textKey: 'downloadPNG',
                        onclick: function () {
                            this.exportChart();
                        }
                    }, {
                        textKey: 'downloadJPEG',
                        onclick: function () {
                            this.exportChart({
                                type: 'image/jpeg'
                            });
                        }
                    }, {
                        textKey: 'downloadPDF',
                        onclick: function () {
                            this.exportChart({
                                type: 'application/pdf'
                            });
                        }
                    }, {
                        textKey: 'downloadSVG',
                        onclick: function () {
                            this.exportChart({
                                type: 'image/svg+xml'
                            });
                        }
                    }, {
                        separator: true
                    },{
                        text: 'Clinet side export to PNG',
                        onclick: function () {
                            this.exportChartLocal();
                        }
                    }, {
                        text: 'Clinet side export to SVG',
                        onclick: function () {
                            this.exportChartLocal({
                                type: 'image/svg+xml'
                            });
                        }
                    }]
                }
            }
        },
        chart: {
            renderTo: conta,
            type: type,
            marginRight: 130,
            marginBottom: 120
        },
        title: {
            text: X_title,
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        // plotOptions: {
        //  column: {
        //    minPointLength: 20
        // }
        //},
        xAxis: {
            min:0,
            max:maxVariable,
            labels: {
                //rotation: rotlab,
                align: 'top',
                // align: 'center',
                autoRotation: [-45],
                autoRotationLimit: 100
            },
            categories: xAxisLabel
        },

        yAxis: yAxisVariale,

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: dataLabelvariable,
                    //  y: -5,
                    inside:false,
                    crop :false,
                    overflow :'none',
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        return Highcharts.localizationNumber(this.y);
                    },
                    useHTML: true
                }
            }
        },

        tooltip: {
            crosshairs: [true, true],
            shared: true,
            useHTML: true,
            formatter: function() {

                var s = [];

                s.push('<table><tr><td style="text-align:right;" colspan="3"><b>' +
                    this.x + '</b></td></tr>');


                $.each(this.points, function(i, point) {

                    s.push('<tr><td style="text-align: right;">'+
                        '<b><span style="color:'+point.series.color +'">\u25CF</span></b>'+
                        '</td>'+
                        '<td style="text-align: right;"><b>'+point.series.name +' : </b></td>'+
                        '<td><b>' + Highcharts.localizationNumber(point.y)+'</b></td>'+
                        '</tr>');
                });

                s.push('<tr><td style="text-align:right;" colspan="3"><b>تعداد خبر : ' +
                    Highcharts.localizationNumber(this.points[0].point.NumberNews) + '</b></td></tr></table>');
                return s.join('');
            }
        },
        legend: {
            labelFormatter: function() {
                return '<b>'+this.name+'</b>';
            },
            borderWidth: 1,
            useHTML: true,
            borderColor: '#C98657',
            backgroundColor: '#FCFFC5'
        },
        series: seris_column2,

        scrollbar: {
            enabled: scrbal,
            barBackgroundColor: 'gray',
            barBorderRadius: 7,
            barBorderWidth: 0,
            buttonBackgroundColor: 'gray',
            buttonBorderWidth: 0,
            buttonArrowColor: 'yellow',
            buttonBorderRadius: 7,
            rifleColor: 'yellow',
            trackBackgroundColor: 'white',
            trackBorderWidth: 1,
            trackBorderColor: 'silver',
            trackBorderRadius: 7
        }


    });
});

我的主要问题是：

1）更改字符串的字体和大小（标签和标题，..）

2）传奇字符串的重叠

3）当xaxis标签变成-45时，标签上升。（另一个例子..）

我用过：

exporting: {
        allowHTML:true ,
        chartOptions: {
            xAxis: {

                labels: {
                    align: 'top',
                }
            },
        }

但没有改变任何事情...

我该怎么办？

谢谢

Answer 1

我知道回答这个问题已经太晚了，但我认为如果你将

chartOptions

更改为下面的内容，图例字符串重叠问题将得到解决。

chartOptions: {
    chart: {
        width: document.getElementById('conta').clientWidth,
        height: document.getElementById('conta').clientHeight
    }
}

我遇到了同样的问题，并通过此更改解决了。