如何本地化从Highcharts导出的文件

本文关键字:文件 Highcharts 本地化 | 更新日期: 2023-09-27 18:15:38

我有一些本地化为非英语语言的图表,比如泰语(示例文本:)。

一切似乎都很好,所有的文本都可以用特定的语言显示。

但是当我试图将图表导出到文件时,这些是发生的事情的列表:

-下载为PNG图像->结果:所有非英文字符变成正方形。
-下载为JPEG图像->结果:与下载为PNG相同
-下载为PDF文件->结果:与下载为PNG相同
-下载为SVG矢量图像->结果:显示正确

要知道它是什么样子的,只需将那里的英文Label替换为泰语示例文本(示例文本:)。

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin-top: 1em"></div>

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                zoomType: 'xy'
            },
            title: {
                text: 'ข้อมูลเข้านะจ๊ะ'
            },
            subtitle: {
                text: 'สิบวันที่แล้วนะจ๊ะ'
            },
            xAxis: [{
                categories: ['2012-08-01', '2012-08-02', '2012-08-03', '2012-08-04', '2012-08-05', '2012-08-06', '2012-08-07', '2012-08-08', '2012-08-09', '2012-08-10', '2012-08-11', '2012-08-12']
            }],
            exporting: {
            buttons: {
                exportButton: {
                    menuItems: [{},
                    {},
                    {},
                    {}, /* leave standard buttons */
                    {
                        text: 'Download as xls',
                        onclick: function() {
                          location.href="getXLS.php?param1=param&param2=para2";}
                    }
                                            ]
                }
            }
        },
            yAxis: [{ 
                min: 0,
                max: 100,
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
                plotBands: [{ // High wind
                    from: 90,
                    to: 100,
                    color: 'rgba(68, 170, 213, 0.1)',
                    label: {
                        text: 'AR to get',
                        style: {
                            color: '#606060'
                        }
                    }
                }],
                title: {
                    text: 'AR'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },{ 
                min: 0,
                max: 8000,
                gridLineWidth: 1,
                title: {
                    text: 'Inbound',
                    style: {
                        color: '#AA4643'
                    }
                },
                labels: {
                    formatter: function() {
                        return this.value;
                    },
                    style: {
                        color: '#AA4643'
                    }
                },
                opposite: true
            }],
            tooltip: {
                formatter: function() {
                    var unit = {
                        'AR': '% ',
                        '1': '1',
                        '2': '2',
                        '3': '3'
                    }[this.series.name];
                    return ''+
                        this.x +': '+ this.y +' '+ unit;
                }
            },
            legend: {
                align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                yAxis: 1,
                name: '1',
                data: [2000, 1000, 3000, 2000, 1000]
            }, {
                yAxis: 1,
                name: '2',
                data: [4000, 7000, 4000, 6000, 5000]
            }, {
                name: '3',
                type: 'spline',
                color: '#F7801F',
                yAxis: 0,
                data: [90, 80, 70, 90, 85],    
            }]
        });
    });
});

如何本地化从Highcharts导出的文件

我遇到了完全相同的问题。如果确定问题与编码无关,则根据导出

的方式尝试以下操作
  • 如果您通过自己的服务器导出,请确保添加了所需的字体
  • 如果你在本地导出,也添加这个

    <script src="http://code.highcharts.com/modules/offline-exporting.js"></script>