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

时间:2016-05-22 07:20:32

标签: highcharts export

我使用Highchart在我的页面中绘制一些图表。我正在为我的图表设置一些属性。我看到,为了下载和保存某些类型的图表,Highchart使用了导出。但保存的图表的属性与原始图表不同。 例如我原来的图表是这样的: enter image description here

我的代码是:

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)相关字符串的重叠

enter image description here 3)当xaxis标签转为-45时,标签会上升。(换另一个例子..) enter image description here

我用过:

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

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

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

我该怎么办?

由于

0 个答案:

没有答案