解决highCharts导出功能汉化问题

转自：http://www.cnblogs.com/jyh317/p/4191841.html

 

本文以highCharts中文网上的例子为原型，处理解决highCharts导出功能为英文的问题。

　　我们使用highCharts当然希望所有提示或文本都是中文的了，但是highCharts的默认语言是英语，如下图。

　　

　　那么怎么把图片中导出功能的提示换成中文呢？

　　本文利用highCharts的在线测试平台来解决这个问题。

　　只需要加入一个全局设置，即可解决这个问题。

　　

  Highcharts.setOptions({
            lang: {
               　 printChart:"打印图表",
                  downloadJPEG: "下载JPEG 图片" , 
                  downloadPDF: "下载PDF文档"  ,
                  downloadPNG: "下载PNG 图片"  ,
                  downloadSVG: "下载SVG 矢量图" , 
                  exportButtonTitle: "导出图片" 
            }
        });

 

$(function () {
     Highcharts.setOptions({
            lang: {
               　 printChart:"打印图表",
                  downloadJPEG: "下载JPEG 图片" , 
                  downloadPDF: "下载PDF文档"  ,
                  downloadPNG: "下载PNG 图片"  ,
                  downloadSVG: "下载SVG 矢量图" , 
                  exportButtonTitle: "导出图片" 
            }
        });
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart rotation demo'
        },
        subtitle: {
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    

    // Activate the sliders
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
});                

 　　最后效果：

　　

　　其实highCharts并不神秘，只要你想到你想要什么样的，你就能通过查阅highCharts的API达到你的目的。

　　比如说这个问题，我们需要把导出功能里的英文换成中文。解决这个问题有两个思路。

　　1、从API里查询导出功能的设置。

　　看上面的列表，我们并没有找到关于语言的设置，当然我们可以修改exporting.js来达到我们的目的，但是最好不要动highCharts的js，能够通过设置实现的功能就不要通过修改（破坏其封装）。

　　2、设置语言大部分都是和lang有关的，那么我们就通过API查看一下全局设置里的lang

　　

　　在全局配置的lang里，我们发现了我们需要修改的英文提示，那么怎么修改它的默认值呢？

　　查API...

　　lang的设置方式：

　　

Highcharts.setOptions({
    lang: {
        months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',  'Juillet', 'Ao?t', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
    }
});

 　　

　　如上的分析思路，我们通过API很同意的走进了highCharts的世界，highCharts的样式很漂亮，交互性很好，很生动，很动态的表现了你的数据图表，值得一试。