解決highCharts導出功能漢化問題

　　本文以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達到你的目的。

　　好比說這個問題，咱們須要把導出功能裏的英文換成中文。解決這個問題有兩個思路。

　　一、從API裏查詢導出功能的設置。

　　看上面的列表，咱們並無找到關於語言的設置，固然咱們能夠修改exporting.js來達到咱們的目的，可是最好不要動highCharts的js，可以經過設置實現的功能就不要經過修改（破壞其封裝）。

　　二、設置語言大部分都是和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的樣式很漂亮，交互性很好，很生動，很動態的表現了你的數據圖表，值得一試。