Highcharts学习笔记之一——饼图

首先对于曲线图表的主要要素：

• chart{}

1. backgroundColor://整个图片区的背景颜色，包括标题，图例，图表区
2. plotBackgroundColor://图表区的颜色背景,饼图的背景色
3. plotBorderColor://图表区边界的颜色
4. plotBorderWidth://图表区边界的厚度
5. 
   
6. type://图表的类型,"pie",该参数是可以在series中使用。与下面的plotOptions一起使用，例如type：pie,plotOptions{pie:{}}

• plotOptions:{}//
• title{}//标题

1. align：//水平方向排列的位置，"left","center","right"
2. floating：
3. margin：
4. style：//样式CSS{"color":,}
5. text：//标题名
6. useHTML：
7. verticalAlign：//竖直方向排列的位置,"top","middle","bottom"
8. x：
9. y：

• subtitle:{}//副标题，同上面的title一样
• xAxis:{}//x轴

注意：通常只有一个x轴时，就是JOSN格式。如果有两个X轴或者多个x轴，就是一个JOSN数组。例如

xAxis:[

{

    lineWidth:12

        },

{

lineWidth:12,

opposite:true//

}

]

1. title{}

• text:字符串类型
• align:字符串类型,有三个值，'low'，'middle','high'
• rotation:数值类型
• offset:数值型。offset一旦设置，发现margin的作用失效。标题和坐标轴的距离
• margin:数值型 标题离坐标轴的距离
• style：CSS样式,{color}等

1. lineColor:
2. lineWidth:
3. gridLineColor:
4. gridLineDashStyle:
5. gridLineWidth:
6. minorGridLineColor:
7. minorGridLineDashStyle:
8. minorGridLineWidth:
9. tickColor://刻度的颜色
10. tickWidth://刻度的宽度
11. tickLength://刻度的长度
12. tickInterval://
13. opposite:boolean//默认是false。用于两个或者两个坐标轴
14. labels:{}

• align://字符串类型，默认'center'
• rotation://数值型,旋转角度
• staggerLines://数值型,标签的错开行数显示。例如2,3
• step:坐标轴上的标签，每几步显示的步数
• tooltip:{}//提示信息、提示文本

1. animation:
2. backgroundColor:'#FCFFC5'
3. borderColor:'#FCFFC5'
4. borderRadius:数值
5. borderWidth:数值
6. shared://默认是false,是是否同时显示的意思
7. crosshairs://十字准线，交叉丝，瞄准器，默认false
8. hideDelay:
9. valueDecimals:数值如3.代表小数点后三位有效数字

• credits:{}//副标题，同上面的title一样

1. enabled:true
2. href:
3. position:
4. style:
5. text:

———————————————————————————————————————————————

显示 图例：

• plotOptions:{}

1. pie{

• showInLegend：//两个值true/false,必须这里先定义为 true时，才会显示图例
• allowPointSelect://true或者 false,鼠标选中后会分离出来
• dataLabels:{}//注意：dataLables可以在"series"中针对某一数据

1. enabled://显示数值,"true","false"
2. backgroundColor://数字标签背景色
3. color://标签上字体的颜色
4. distanse://数字标签离饼图的距离,可以为正数，零，负数
5. borderRadius://背景为矩形,四个角为扇形
6. format://形式
7. rotation//旋转角度
8. connectorWidth://数值型,数字标签与饼图边缘的连接线的宽度
9. formatter://举例:function(){return this.point.name+":"+this.point.y;}

• innerSize://数值型或者是字符串"60%"//注意：innerSize可以在"series"中针对某一数据出现

}

• legend:{}//图例

1. enabled://boolean型，true或者false
2. title
3. align://图例整体的水平位置"center","left","right"
4. verticalAlign://图例整体的竖直位置"top","middle","bottom"
5. layout：//图例的布局,"horizontal","vertical"
6. itemDistance://当图例的布局是'horizontal'时,类目之间的距离
7. backgroundColor://图例整体的背景色
8. shadow://两个值"true","false",会显得更立体
9. borderWidth://数值型。图例的边框宽度
10. borderColor://图例变宽的颜色
11. borderRadius://图例的边框的角度
12. symbolHeight:
13. symbolPadding://数值型
14. symbolRadius://
15. symbolWidth://数值型

————————————————————————————————————————————————————————————————————————————

最重要的一点：数据

• series:{}

1. name：//字符串型，每一个数组data都有一个名字
2. size://做饼图的时候会用到
3. innerSize://饼图的时候
4. dataLabels{}//数据标签
5. id//在数据钻取时用到
6. data：数组