此文档是本人在开发过程图形报表时使用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//是否显示信息

     }

Highcharts中文帮助文档

Chart 图标区选项

Chart图表区选项用于设置图表区相关属性。

Color 颜色选项

Color颜色选项用于设置图表的颜色方案。

Highcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：

 
Highcharts.setOptions({ 
    colors: [‘#058DC7‘, ‘#50B432‘, ‘#ED561B‘, ‘#DDDF00‘, ‘#24CBE5‘, ‘#64E572‘, ‘#FF9655‘, 
‘#FFF263‘, ‘#6AF9C4‘] 
}); 

Credits 名片

exporting 导出

Global 全局设置

（Google翻译的）

全球设置并不适用于每个图表的选项。像lang选项，这些选项，必须设置使用Highcharts.setOptions方法。

Title：标题选项

Title标题选项用于设置图表的标题相关属性。

Subtitle：副标题选项

副标题提供的属性选项与标题title大致相同，可参照上述标题选项，值得一提的是副标题的text选项默认为‘‘，即空的，所以默认情况下副标题不显示。

xAxis：X轴选项

X轴选项用于设置图表X轴相关属性。

yAxis：Y轴选项

Y轴选项与上述xAxis选项基本一致，请参照上表中的参数设置，不再单独列出。

Series：数据列选项

数据列选项用于设置图表中要展示的数据相关的属性。

plotOptions：数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异，以下是部分选项。

Tooltip：数据点提示框

Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。

Legend：图例选项

legend用于设置图例相关属性。

Navigation按钮和图例选项

Loading

在图形上显示一个loading文字,可能是用于增加用户体验

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