• 解决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的样式很漂亮,交互性很好,很生动,很动态的表现了你的数据图表,值得一试。

  • 相关阅读:
    触摸屏测试:Tslib
    Ubuntu:我不小心把/var/lock文件夹给删了
    驱动开发学习笔记. 0.02 基于EASYARM-IMX283 烧写uboot和linux系统
    驱动开发学习笔记. 0.01 配置arm-linux-gcc 交叉编译器
    驱动开发学习笔记.0.00 从拿到一块开发板开始
    利用联合体通过串口收发浮点数
    stm32 MDK5软件仿真之查看io口输出
    ListView 类
    INotifyPropertyChanged 接口
    ItemsControl 类绑定数据库
  • 原文地址:https://www.cnblogs.com/jyh317/p/4191841.html
Copyright © 2020-2023  润新知