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

时间:2014-07-30 04:14:55

标签: c# jquery asp.net-mvc highcharts

我将图表本地化为非英语语言,例如Thai(示例文本:ภาษาไทย)。

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

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

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

要知道它的样子,只需用泰语示例文本替换英文标签(示例文本:ภาษาไทย)。

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

});

1 个答案:

答案 0 :(得分:0)

我遇到了完全相同的问题。如果您确定问题与编码无关,请根据导出方式尝试以下操作

  • 如果您是通过自己的服务器导出,请确保添加了所需的字体
  • 如果您要在本地导出,请同时添加此

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