highchart部分按钮和头部信息的汉化

链接地址

https://www.cnblogs.com/rx100/p/4137051.html

HighCharts/Highstock使用小结,使用汉化及中文帮助文档

   此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 。最后附上有HighCharts中文帮助文档

   HighCharts  版本：Highcharts-3.0.1   

   HighStock   版本：Highstock-1.3.1

   下载地址：http://www.highcharts.com/

xAxis x轴的样式

xAxis: {

      categories: ['Apples', 'Bananas', 'Oranges']], //X轴数据data

          abels: {//X轴坐标值样式  

              rotation: -30,   //字体倾斜的角度

              align: 'right',    //字体倾斜的方向

              style: {         //字体样式

                   font: 'normal 14px Verdana, sans-serif' 

                   }

                },

           title:{

                 text: '单位(类型)'  //X轴上的标题

               }

        }

X轴其它属性值：

   tickPixelInterval: 150,//x轴上的间隔

   type: 'datetime', //定义x轴上数据类型（此处以日期为例）

   labels: {        //设置X轴各分类名称的样式style

        formatter: function() { 

              var vDate=new Date(this.value); 

              return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate(); 

           }     //定义x轴上数据显示格式（此处以日期格式为例）

align: 'center'   //显示位置

allowDecimals：true   //轴上的刻度是否允许使用小数 默认值为true

 

 

如果使用到其它属性可参照以下信息

Highcharts翻译系列之十七：xAxis x轴的样式（一）

http://www.2cto.com/kf/201304/200094.html

Highcharts 翻译系列之十八：x轴样式（二）

http://www.2cto.com/kf/201304/200096.html

 

yAxis y轴的样式

Y轴选项与上述xAxis选项基本一致，请参照上面xAxis x轴的样式

Exporting 导出

exporting :{

               enabled:true

            },   //隐藏打印按钮 （右上角，默认为true）

Credits 名片

 credits:{

      enabled:false

      },  //Credits 名片   (右下角，默认为true。)

plotOptions数据点选项

plotOptions: {      //此处主要是以柱状图为例

        column: {

           dataLabels: {

           enabled: true,     //是否显示

           style: {           //字体样式

           fontWeight: 'bold'   

                },

            formatter: function() {    //显示信息的内容和格式（此处可以做超链接）

                return   this.y+' 人';

                        }

                    }

                }

            } 

 

 

如果使用到其它属性可参照以下信息

Highcharts翻译系列九：PlotOptions之area区域图

http://www.2cto.com/kf/201304/200072.html

 

Legend：图例选项

 

legend: {

         layout: 'vertical',

         align: 'right',

         verticalAlign: 'top',

         x: -10,

         y: 100,

         borderWidth: 0

            },  //图例样式

 

 

如果使用到其它属性可参照以下信息

Highcharts翻译系列六：legend 图例选项

http://www.2cto.com/kf/201304/200066.html

 

Color 颜色选项

   此处请参照HighCharts中文帮助文档

Title：标题选项

tooltip: {

      formatter: function() {    //在此处可以自定义提示信息显示的样式

                return '<b>'+ this.x.toLowerCase() +'： '+this.y +' 人</b> ' ;

            }

     },

 

 

如果使用到其它属性可参照以下信息

Highcharts翻译系列之十六：tooltip工具提示

http://blog.csdn.net/qiqingli/article/details/8725572

Lang  语言选项 （英译汉）

lang:{ 

    printChart: '打印图表',

  downloadPNG: '下载JPEG 图片',

       downloadJPEG: '下载JPEG文档',

downloadPDF: '下载PDF 图片',

       downloadSVG: '下载SVG 矢量图',

       contextButtonTitle: '下载图片'

  }

 

 

HighStock  顶部按钮和时间格式汉化

 

（Zoom,From,To   highstock.js---308行）

rangeSelector: { 

                    buttons: [{//定义一组buttons,下标从0开始 

                    type: 'week', 

                    count: 1, 

                    text: '1周' 

                },{ 

                    type: 'month', 

                    count: 1, 

                    text: '1月' 

                }, { 

                    type: 'month', 

                    count: 3, 

                    text: '3月' 

                }, { 

                    type: 'month', 

                    count: 6, 

                    text: '6月' 

                }, { 

                    type: 'ytd',  

                    text: '1季度' 

                }, { 

                    type: 'year', 

                    count: 1, 

                    text: '1年' 

                }, { 

                    type: 'all', 

                    text: '全部' 

                }], 

                buttonTheme: {

                             width: 36,

                             height: 16,

                             padding: 1,

                             r: 0,

                             stroke: '#68A',

                             zIndex: 7

                      },

                          inputDateFormat: '%Y-%m-%d',

                          inputEditDateFormat: '%Y-%m-%d',

                    selected: 1//表示以上定义button的index,从0开始 

                },

语言对象。语言对象是全局的，而且不能在图表初始化的时候设置。它必须使用Highcharts.setOptions在图表初始化之间设置

 

Highcharts.setOptions({

         global: {

          useUTC: false

             },

          lang:{

          months:[ 'Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août','Septembre',  'Octobre','Novembre', 'Decembre'],

          weekdays:[ 'Sunday',  'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

          }

      });

 

汉化后:

 

Highcharts.setOptions({

         global: {

          useUTC: false

             },

          lang:{

          months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],

          weekdays:['星期日',  '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

          }

      });

 

其他汉化信息科参照

highcharts 页面导出按钮汉化

http://www.kaifajie.cn/wangyezhizuo/5628.html

 

 

Column, line and pie 三图组合

tooltip: {

         formatter: function() {

                        var s;

                        if (this.point.name) { // 当为饼状图时

                            s = ''+

                                this.point.name +': <br/>总户数 '+ this.y +' 户';

                        }else {

                            s = ''+

                               +this.series.name +'('+this.x +'): '+ this.y+' 户’;

                        }

                        return s;

                    },

                    positioner:null

                },

 

size: 120,    //Pie大小

allowPointSelect: true, //扇区是否可以点击

cursor: 'pointer',  //鼠标的样式

showInLegend: false,  //图例

dataLabels: {

       enabled: false//是否显示信息

     }