首页 > 代码库 > HighCharts/Highstock使用小结,使用汉化及中文帮助文档

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//是否显示信息

     }

 

 

 

 

Highcharts中文帮助文档

 

Chart 图标区选项

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

参数

描述

默认值

backgroundColor

设置图表区背景色

#FFFFFF

borderWidth

设置图表边框宽度

0

borderRadius

设置图表边框圆角角度

5

renderTo

图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值

null

defaultSeriesType

默认图表类型line, spline, area, areaspline, column, bar, pie , scatter

0

width

图表宽度,默认根据图表容器自适应宽度

null

height

图表高度,默认根据图表容器自适应高度

null

margin

设置图表与其他元素之间的间距,数组,如[0,0,0,0]

[null]

plotBackgroundColor

主图表区背景色,即X轴与Y轴围成的区域的背景色

null

plotBorderColor

主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色

null

plotBorderWidth

主图表区边框的宽度

0

shadow

是否设置阴影,需要设置背景色backgroundColor。

false

reflow

是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小。

true

zoomType

拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x‘,‘y‘,‘xy‘

‘‘

events

事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数。

 

 

 

Color 颜色选项

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

参数

描述

默认值

color

用于展示图表,折线/柱状/饼状等图的颜色,数组形式。

array

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

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

 

Credits 名片

 

参数

描述

默认值

enabled

是否启用名片

True

href

点击名片跳转的链接

http://www.highchart.com

position

设置名片的位置

position: {

       align: ‘right‘,

       x: -10,

       verticalAlign: ‘bottom‘,

       y: -5

}

style

设置名片的样式

 

text

设置名片显示的值

"Highcharts.com"

 

exporting 导出

 

参数

描述

默认值

enabled

是否显示导出打印的按钮

true

url

设置点击导出按钮连接的地址,默认是官网的地址,可自己定义

 

filename

保存的文件名

chart

type

保存的文件类型

Image/png

buttons

设置导出或打印按钮的样式、事件等具体配置请看官网

 

width

宽度

800

enableImages

是否启用图像的出口。包括图像的点标记,背景图片等,默认为false。应该是是否添加背景图http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/exporting/enableimages/

false

 

Global 全局设置

(Google翻译的)

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

参数

描述

默认值

canvasToolsURL

设置延迟加载的Android2.x设备的附加文件的URL。这些设备不支持SVG,所以需要下载一个帮助文件,其中包含canvg,的依赖关系rbcolor,和CanVG Renderer类。可以自己安装canvas-tools.js到自己的服务器上,相应地更改此选项。默认值的“http://www.highcharts.com/js/canvas-tools.js”。

 

useUTC

是否使用UTC时间,为轴缩放,刻度标记的位置和时间在Highcharts.dateFormat显示。

 

 

 

 

 

 

Title:标题选项

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

参数

描述

默认值

text

标题文本内容。

Chart title

align

水平对齐方式。

center

verticalAlign

垂直对齐方式。

top

margin

标题与副标题之间或者主图表区间的间距。

15

floating

是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用。

false

style

设置CSS样式。

{color: ‘#3E576F‘,
fontSize: ‘16px‘}

Subtitle:副标题选项

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

 

xAxis:X轴选项

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

参数

描述

默认值

categories

设置X轴分类名称,数组,例如:categories: [‘Apples‘, ‘Bananas‘, ‘Oranges‘]

[]

title

X轴名称,支持text、enabled、align、rotation、style等属性

 

labels

设置X轴各分类名称的样式style,格式formatter,角度rotation等。

array

max

X轴最大值(categories为空时),如果为null,则最大值会根据X轴数据自动匹配一个最大值。

null

min

X轴最小值(categories为空时),如果为null,则最小值会根据X轴数据自动匹配一个最小值。

array

gridLineColor

网格(竖线)颜色

#C0C0C0

gridLineWidth

网格(竖线)宽度

1

lineColor

基线颜色

#C0D0E0

lineWidth

基线宽度

0

 

yAxis:Y轴选项

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

 

Series:数据列选项

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

参数

描述

默认值

data

显示在图表中的数据列,可以为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或
data: [{name: ‘Point 1‘,y: 0}, {name: ‘Point 2‘,y: 5}]

如果想对不同的列显示不同的颜色请对该列使用color属性,如data: [148.5, { y: 216.4,color: ‘#BF0B23‘},54.4]

‘‘

name

显示数据列的名称。

‘‘

type

数据列类型,支持 area, areaspline, bar, column, line, pie, scatter or spline

line

 

plotOptions:数据点选项

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

参数

描述

默认值

enableMouseTracking

启用或禁用鼠标跟踪一个特定的列。这包括点提示和图上点的单击事件。对于大型数据集,它可以提高性能。如果这个禁用了event事件将无法执行

true

events

可以设置对整个图形的click事件、单击图例显示和隐藏图形,还有mouseOut、mouseOver等。具体详细信息请看官网

 

point

每个单点的属性,该属性下面可以这个单个点的click、mouseOut、mouseOver、remove、select(选中是触发)、unselect(失去选中时触发),update(对某个点更新时触发)

 

zIndex

设置图形的zIndex值,值相对大的显示在顶层

 

pointPadding

设置每列之间填充的大小,只对column和bar有效。

 

pointWidth

设置每列之间一个固定的宽度,只对column和bar有效。

 

 

 

Tooltip:数据点提示框

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

参数

描述

默认值

enabled

是否显示提示框

true

backgroundColor

设置提示框的背景色

rgba(255, 255, 255, .85)

borderColor

提示框边框颜色,默认自动匹配数据列的颜色

auto

borderRadius

提示框圆角度

5

shadow

是否显示提示框阴影

true

style

设置提示框内容样式,如字体颜色等

color:‘#333‘

formatter

回调函数,用于格式化输出提示框的显示内容。返回的内容支持html标签如:<b>, <strong>, <i>, <em>, <br/>, <span>

2

 

Legend:图例选项

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

参数

描述

默认值

layout

显示形式,支持水平horizontal和垂直vertical

horizontal

align

对齐方式。

center

backgroundColor

图例背景色。

null

borderColor

图例边框颜色。

#909090

borderRadius

图例边框角度

5

enabled

是否显示图例

true

floating

是否可以浮动,配合x,y属性。

false

shadow

是否显示阴影

false

style

设置图例内容样式

‘‘

 

 

Navigation按钮和图例选项

参数

描述

默认值

buttonOptions

设置导出,打印按钮的选项,如显示的位置,样式,是否启用等

 

menuItemHoverStyle

悬停在图例上面的样式

 

menuItemStyle

 

 

mentStyle

 

 

 

Loading

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

参数

描述

默认值

hideDuration

设置loading标签淡出的时间

100

showDuration

设置loading标签淡入的时间

100

labelStyle

Loading标签样式

 

style

loading标签的样式,涵盖了绘图区

 

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