解決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達到你的目的。

　　比如說這個問題，我們需要把導出功能里的英文換成中文。解決這個問題有兩個思路。

　　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的樣式很漂亮，交互性很好，很生動，很動態的表現了你的數據圖表，值得一試。