码迷,mamicode.com
首页 > 其他好文 > 详细

highcharts 配置选项

时间:2014-10-26 12:58:38      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   ar   使用   for   strong   

        Highcharts给了丰富的配置项,用于满足用户的需求。在我这个项目中,图表开始由美工设计,在应用highcharts的时候,读了highcharts的文档,着实仔细的配置了一番。

比如Legend的配置,坐标轴的样式等等。

先附上一个表格,再记录几个项目中用到的例子,备用。

1.  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 基线宽度

2. yAxis:Y轴选项

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

3. Series:数据列选项

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

参数 描述 默认值
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 or spline line

4. plotOptions:数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型,其属性设置略微有些差异,现将常用选项列出来。

 

参数 描述 默认值
enabled 是否在数据点上直接显示数据 false
allowPointSelect 是否允许使用鼠标选中数据点 false
formatter 回调函数,格式化数据显示内容 formatter: function() {return this.y;}

 

 

 

5. 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

6. exporting:导出选项

一般都禁用了

7. credits:商标

 一般都禁用了

8. Legend:图例选项

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

参数 描述 默认值
layout 显示形式,支持水平horizontal和垂直vertical horizontal
align 对齐方式。 center
backgroundColor 图例背景色。 null
borderColor 图例边框颜色。 #909090
borderRadius 图例边框角度 5
enabled 是否显示图例 true
floating 是否可以浮动,配合x,y属性。 false
shadow 是否显示阴影 false
style 设置图例内容样式 ‘‘
symbolWidth 设置图例中标志的宽度 如果不想要这个标志,把宽度设置为0
itemHoverStyle 图例中文字hover时的样式  
itemStyle 图例文字的样式 { "color": "#fff","font-size":"18px","font-family":"微软雅黑","font-weight":"normal" }
     
     
     
     
     

 


 项目中的例子:

 

 

bubuko.com,布布扣

在这个图表中,看不到x轴和Y轴,有tooltip 

配置是这样的:

 

 

xAxis: {
  labels: {
    enabled: false //不显示x轴上的label,数字标识
  },
 
gridLineWidth: 0, //不显示表格线
lineWidth: 0 //不显示坐标轴线
},
yAxis: {
  labels: {
  enabled: false
   // min: 0 //min:0 表示y轴最小从0开始,注释掉,则y轴支持负值
  },
min: 0,
gridLineWidth: 0,
title: {
  text: ‘‘,
  align: ‘high‘
},

title: {
align: ‘left‘,
text: ‘销售趋势图‘,
x: 10,
y: 30,  //配置Title的坐标
useHTML: true,
style: { "color": "#fff", "font-size": "18px", "font-family": "微软雅黑", "font-weight": "normal" }
}

Example 2:

bubuko.com,布布扣

 在这个图中, 柱子背景颜色不同,尝试使用colors属性设置,并不起作用,后来发现设置series 的data属性可以达到效果。

 series: [{
                        name: ‘Population‘,
                        data: [{‘color‘:‘颜色值‘,‘y‘:‘数值‘},
                           {‘color‘:‘颜色值‘,‘y‘:‘数值‘},
                           {‘color‘:‘颜色值‘,‘y‘:‘数值‘},
                           {‘color‘:‘颜色值‘,‘y‘:‘数值‘}], //设置柱上的背景颜色和数值
                        dataLabels: {//设置柱上的数字显示样式
                            enabled: true,
                            color: ‘#666‘,
                            align: ‘center‘,
                            x: 14,
                            y: 0,
                            style: {
                                fontSize: ‘13px‘,
                                fontFamily: ‘Verdana, sans-serif‘
                                
                            }
                        }
                    }]

 

highcharts 配置选项

标签:style   blog   http   color   io   ar   使用   for   strong   

原文地址:http://www.cnblogs.com/xinchuang/p/4051771.html

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