(转)highcharts详解-直线

通过昨天的研究发现:直线图的调用是最简单的，好，那我们就从这里入手！
从源码来看，它仅仅是实例化了一个chart的对象，然后对chart的各项属性做了些配置,其主要内容是:
        1.renderTo              指定图表的容器
        2.defaultSeriesType     指定图表类型
        3.title                 设置图表主标题
        4.subtitle              设置图表副标题
        5.xAxis                 设置图表横轴内容
        6.yAxis                 设置图表纵轴内容
        7.tooltip               设置数据点提示内容
        8.series                设置数据点数据
它的配置方式是:
        var chart;
        chart = new Highcharts.Chart({
           chart:{
            renderTo:
            defaultSeriesType:
            },
           title
           subtitle
           xAxis
           yAxis
           tooltip
           series
        })
在chart方法下有控制图表跟容器边距的属性:margin,marginTop,marginRight,marginBottom,marginLeft
   属性     值类型     默认值         说明
  margin     Array       [null]         该值是一个数组在数组中有4个数字值，分别代表"上右下左"边距
 marginTop   number       null          上边距，默认值0
 marginRight number       50            右边距，默认值50
 marginBottom number      70            下边距, 默认值70
 marginLeft   number      80            左边距, 默认值80
如图所示：
  
在xAxis和yAxis方法下有一个plotLines属性，它是一条参考线，我们可以对它进行横轴和纵轴的数据进行比对
    属性     值类型     默认值         说明
   color     Color值   null，即透明    例如#123456
   dashStyle  String   solid,即直实线  可选:'Solid','ShortDash', 'ShortDot','ShortDashDot',
            'ShortDashDotDot','Dot','Dash','LongDash','DashDot','LongDashDot', 'LongDashDotDot' 
   event:    事件类型  Object         events: { click: function(e) { do something... }} 
   id        string    null            当触发某个事件时，可以取消指定id的参考线
如：
   plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 5.5,
            id: 'plotline'
        }] ....
 $('#button').click(function() {
   chart.xAxis[0].removePlotLine('plotline');
});
  value      num      null           根据值来定参考线的位置
  width      num      null           参考线的宽度
  zIndex     num      null           参考线的z-index值

在legend方法下，可以配置小方框中的说明的显示方式：
      
  属性             值类型     默认值         说明
 align             String     center         说明相对于图表的对齐方式
backgroundColor    Color值    null           说明框的背景颜色
borderColor        Color值    #909090        说明框的边框颜色
borderWidth         num          5           说明框的宽度
enabled           Boolean     true           说明框是否显示
floating          Boolean     false          说明框是否漂浮，漂浮起来就可以显示在图表之上
borderRadius        num          5           说明框的圆角的弧度，0为方方正正，大于0则有圆角
itemHiddenStyle     css      { color:'#CCC'} 某一条线经过单击后隐藏时的颜色，默认灰色
itemHoverStyle      css      { color: '#000'} 鼠标悬浮于说明的那条线时的颜色，默认黑色
itemStyle           css      { cursor: 'pointer', color: '#3E576F'} 默认link的样式
layout             String     horizontal     默认水平放置说明
labelFormatter     Function   function() { return this.name }    说明文字，默认为其名字
lineHeight         num          16           说明文字的行高
width              num         null          说明框的宽度
 x                 num         15            相对于center的横坐标
 y                 num         15            相对于center的纵坐标
verticalAlign    String      bottom          说明框的纵向对齐方式
symbolPadding      num          5            图标的内边距
symbolWidth        num         30            图标的宽度



呵呵，通过逐一测试这些参数，发现这个插件还真是很强大!

 

转自：http://hi.baidu.com/zhanglp/item/490d7f34f8f6b5fae7bb7ab3

转载于:https://www.cnblogs.com/wdw31210/archive/2012/06/28/2567672.html