码迷,mamicode.com
首页 > Windows程序 > 详细

HighCharts 具体使用及API文档说明

时间:2014-06-28 16:40:20      阅读:399      评论:0      收藏:0      [点我收藏+]

标签:style   http   java   color   get   使用   

一、HighCharts开发说明

HighCharts开发实际上配置HighCharts每一个部分,比方配置标题(title),副标题(subtitle)等,当中每一个部分又有更细的參数配置,比方标题下有对齐方式(align),标题文字(text)等。下图为整个图表的每一个部分位置说明(请对比以下HighCharts总体结构)
bubuko.com,布布扣

二、HighCharts总体结构

通过查看API文档我们知道HighCharts结构例如以下:(API文档在文章后面提供下载)

var chart = new Highcharts.Chart({

       chart: {…}              // 配置chart图表区

       colors: [{...}]    // 配置主体显示颜色(多个线条和柱体的颜色顺序的)

       credits: {…}     // 配置右下角版权链接

       exporting: {…}  // 配置导出及打印

       global: {…}      // Highcharts.SetOptions方法调用

       labels: {…}        // HTML标签,能够放置在画图的不论什么位置

       lang: {…}        // 语言对象属性配置

       legend: {…}         // 配置图例选项

       loading: {…}    // 配置图表载入选项

       navigation: {…} // 配置导出button属性

       pane: {…}        // 仅适用于极性图表和角仪表

       plotOptions: {…}          // 配置数据点选项

       series: [{...}]               // 配置数据列选项

       subtitle: {…}   // 配置副标题

       title: {…}                  // 配置标题

       tooltip: {…}               // 配置数据点提示框

    xAxis: {…}              // 配置x轴选项

       yAxis: {…}              // 配置y轴选项

})

    上面红色部分是图标完整性及美观必须自己配置的选项,其它选项无特殊须要默认即可,也就是不用配置,所以开发HighCharts是不是非常easy,仅仅须要配置简单的几个选项即可,以下具体解说每一个选项的配置。

三、HighCharts每部分具体配置

1chart :图表区选项

              主要设置图表的类型,图表装载容器名,背景,高度,宽度等图表的总体属性。

參数 描写叙述 默认值
backgroundColor 设置图表区背景色 #FFFFFF
borderWidth 设置图表边框宽度 0
borderRadius 设置图表边框圆角角度 5
renderTo 图表放置的容器,一般在html中放置一个DIV,获取DIVid属性值 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 是否自使用图表区域高度和宽度,假设没有设置widthheight时,会自适应大小 true
zoomType 拖动鼠标进行缩放,沿x轴或y轴进行缩放,能够设置为:‘x’,‘y’,‘xy’
events 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数  

 

2colors :数据列颜色选项

    主要是数据列颜色设置,比方多条线条中的每一个线条颜色。

參数 描写叙述 默认
color 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。

一组html颜色代码

        

colors: [
                 ‘#058DC7‘,
                 ‘#50B432‘,
                 ‘#ED561B‘,
                  ‘#DDDF00‘,
                 ‘#24CBE5‘, 
                 ‘#64E572‘,
                 ‘#FF9655‘,
                 ‘#FFF263‘,
                 ‘#6AF9C4‘
    ]

说明:1、颜色代码为html标准,可通过DW等复制想要的代码

2、默认是从第一个数据列起调用第一个颜色代码,有多少个数

据列调用对应数量的颜色

3、当数据列大于默认颜色数量时,反复从第一个颜色看是调用

 

3credits :版权链接选项

參数 描写叙述 默认值
enabled 是否显示版权及链接,布尔型,默觉得显示 true
position 位置。可用align调整对齐方式,x,y设置距离。 position: { align: ‘right’,x: -10,
         verticalAlign: ‘bottom’,y: -5 }
href 链接地址。String型,默认是highCharts官网 www.highcharts.com
style 名片CSS模式

itemStyle : {

cursor: ‘pointer’,color: ‘#909090′,

fontSize: ’10px’ }

text 显示名字。 highcharts.com

 

 

4exporting :导出及打印选项

參数 描写叙述 默认值
buttons 打印和导出button设置。当中两个button中又有非常多样式等设置,如有须要可具体查看API文档 默认button样式
enableImages 在导出的图片中加入logo水印。布尔型,默认是false false
enabled 是否显示button(也就是启用打印导出功能),布尔型,默认显示 true
filename 导出图片文件名称,String型 chart
type 导出图片的格式,有jpg和png可选,String型 jpg/png
url 转换图片的serverurl,默认是用highchartsserver http://export.highcharts.com
width 图片大小,数字型 800

5global Highcharts.SetOptions方法调用

    全局选项,并不适用于每个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到,详情请查看API文档。

6labels HTML标签(可放置在图表的随意地方)

參数 描写叙述 默认值
items 包括两个选项html和style,分别代表html语句及样式 iteml :{

 

 

 

 

    html : “”,

    style {
            left: ’100px’,top: ’100px’}

  }

style css样式

style:{ color : ‘#3E576F’}

7lang :语言配置选项,主要配置符号、导出时显示的语句、时间显示语言等。和上面的global參数有关,即调用Highcharts.SetOptions方法。下表列举经常使用的选项注意:lang选项事实上就是配置一些显示语言,API中都有具体说明。

參数 描写叙述 默认值
decimalPoint 小数点 .
downloadJPEG 导出显示的文字,以下还有downloadPDF等,都一样 Download JPEG image等
months 月份,字符串数组形式

[‘January‘ ‘February‘, ‘March‘, ‘April‘, ‘May‘, ‘June‘, ‘July‘,

‘August‘, ‘September‘, ‘October‘, ‘November‘, ‘December‘]

numericSymbols 数值单位,比方1000为1k [‘k‘, ‘M‘, ‘G‘, ‘T‘, ‘P‘, ‘E‘]

8legend :图例选项,即数据类标示。

參数 描写叙述 默认值
layout 显示形式,支持水平horizontal和垂直vertical horizontal
align 对齐方式 center
backgroundColor 背景颜色 nulll
borderColor 图例边框颜色 #909090
borderRadius 图例边框角度 5
enabled 是否显示图例 true
floating 能否够浮动,配合x,y属性 false
shadow 是否显示阴影 false
style 图例样式 详见API文档

9loading: 图表载入选项

參数 描写叙述 默认值
hideDuration 淡出效果持续时间,以毫秒为单位 100
labelStyle 标签样式,css形式 详见API文档
showDuration 淡入效果持续时间,以毫秒 100
style 图表载入样式 详见API文档

10navigation  导出button选项,配置导出button及打印样式等,详见API文档。

11pane 极性图表和角仪表选项配置(这两种表是在新版本号2.0.1新添加的选项)

12plotOptions :数据点选项。分不同图表类型配置不同,以下就经常使用的选项及spline选项列表例如以下

參数 描写叙述 默认值
enable 是否在数据点上直接显示数据 false
allowPointSelect 是否同意使用鼠标选中数据点 false
formatter 回调函数,格式化数据显示内容 formatter: function()  { return this.y; }
marker 对某个点标记,多种样式可选  

13series :数据列选项

參数 描写叙述 默认值
data 显示在图表中的数据列,能够为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或
data: [{name: ‘Point 1‘,y: 0}, {name: ‘Point 2‘,y: 5}]
‘’
name 数据列名称 ‘’
type 数据列类型,支持 area, areaspline, bar, column, line, pie, scatter、spline line

14subtitle  副标题选项。和title配置一样,在title中具体解说

15title  标题选项

參数 描写叙述 默认值
text 标题文本内容 Chart title
align 水平对齐方式 center
verticalAlign 垂直对齐方式 top
margin 标题与副标题之间或者主图表区间的间距 15
floating 是否浮动,假设为true,则标题能够偏离主图表区,可配合x,y属性使用 false
style css样式

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

x 依照水平对齐方式的距离 0
y 依照垂直对齐方式的距离 15

16tooltip :数据点提示框选项

參数 描写叙述 默认值
enable 是否显示提示框 true
backgroundColor 设置提示框的背景色 rgba(255, 255, 255, .85)
borderColor 提示框边框颜色,默认自己主动匹配数据列的 auto
borderRadius 提示框圆角度 5
shadow 设置提示框内容样式,如字体颜色等 color:’#333′
formatter

回调函数,用于格式化输出提示框的显示内容

返回的内容支持html标签如:<b>, <strong>,<br/>

 

17xAxis x轴选项

參数 描写叙述 默认
categories

设置X轴分类名称,数组,比如:

categories: [‘Apples‘, ‘Bananas‘, ‘Oranges‘]

[]

title

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

 

 

labels

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

 

max

X轴最大值(categories为空时),假设为null,

则最大值会依据X轴数据自己主动匹配一个最大值

 

null

min

X轴最小值(categories为空时),假设为null,

则最小值会依据X轴数据自己主动匹配一个最小值

 

null

gridLineColor

网格(竖线)颜色

 

#C0C0C0

gridLineWidth

网格(竖线)宽度

1

lineColor

基线颜色

#C0D0E0

lineWidth

基线宽度

0

18yAxis y轴选项

      和x轴配置同样或类似。

 

        注意:1、以上全部參数假设没特殊要求,及为默认是,可不用再代码中配置

                2、API中还有很多其它的配置选项,可通过阅读API了解具体

                3、红色部分为主要配置内容
 

四、实例说明HighCharts开发步骤

1、要求

    1)绘制一个显示本站2012/9/22日訪问统计,包含浏览量(pv),IP数的折线图。

2x轴按每小时统计,y轴显示相应的数量

3)折线图上x轴相应的点显示数量,当鼠标经过改点时,用提示框形式显相关信息

4)要有图例显示每条折现代表什么数据信息

5)图表右下角加上“我爱物联网”字样并链接到www.52wulian.org

6)要有主标题和副标题

7)要能实现图表打印及导出常见格式的图片功能

2、开发步骤

1)新建一个目录名为“HighCharts”,并在该目录内新建一个名为“js”的目录,将所需的“highcharts.js”和“exporting.js”拷贝至“js”目录。
bubuko.com,布布扣

2)在“HighCharts”目录里新建一个html文件,任意命名,用文本编辑器写入例如以下内容:(html代码,相信大家都看的懂)

3)配置chart中每一个选项的属性,代码例如以下

4)本例演示地址:http://www.52wulian.org/test/HighCharts/HighCharts.html

5)本例源文件下载:http://pan.baidu.com/share/link?shareid=66439&uk=3087605183

   本站统一解压password:www.52wulian.org

 

 

HighCharts API文档下载

       本站下载:http://pan.baidu.com/share/link?shareid=63516&uk=3087605183

       本站统一解压password:www.52wulian.org

官方在线APIhttp://api.highcharts.com/highcharts

HighCharts 具体使用及API文档说明,布布扣,bubuko.com

HighCharts 具体使用及API文档说明

标签:style   http   java   color   get   使用   

原文地址:http://www.cnblogs.com/mengfanrong/p/3797780.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!