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

Highcharts的一些属性

时间:2018-01-25 13:05:41      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:lines   鼠标   alert   www   idt   int   mouseover   source   最大   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    </head>
    <body>
        <script>
            var chart;
            $(function(){
                chart=new Highcharts.Chart({
                    chart:{
                        renderTo: container,//设置显示图表的容器  
                        type: line,//设置图表样式,可以为line,spline, scatter, splinearea bar,pie,area,column  
                        //defaultSeriesType: ‘column‘, //图表的默认样式  
                        //margin:[21, 23, 24, 54],//整个图表的位置(上下左右的空隙)  
                        marginRight: 200,//右边间距  
                        marginBottom: 25//底部间距/空隙  
                        //inverted: false,//可选,控制显示方式,默认上下正向显示  
                        //shadow:true,//外框阴影  
                        //backgroundColor:"#FFF",  
                        //animation:true,  
                        //borderColor:"#888",  
                        //borderRadius:5,  
                        //borderWidth:1,  
                        //ignoreHiddenSeries:true,  
                        //reflow:true,  
                        // plotBorderWidth:1,  
                        //alignTicks:true  
                    },
                    
                    labels:{//在报表上显示的一些文本  
                        items:[{  
                            html:本图表数据有误,仅用于说明相应的属性,  
                            style:{left:100px,top:60px}  
                        }, {  
                            html:http://www.highcharts.com/demo,  
                            style:{left:100px,top:100px}  
                        }]  
                    },  
                    credits:{//右下角的文本  
                        enabled: true,  
                        position: {//位置设置  
                            align: right,  
                            x: -10,  
                            y: -10  
                        },  
                        href: "http://www.highcharts.com",//点击文本时的链接  
                        style: {  
                            color:blue  
                        },  
                        text: "Highcharts Demo"//显示的内容  
                    },  
                    
                    //plotOptions:{//绘图线条控制  
                    //   spline:{  
                    //       allowPointSelect :true,//是否允许选中点  
                    //       animation:true,//是否在显示图表的时候使用动画  
                    //       cursor:‘pointer‘,//鼠标移到图表上时鼠标的样式  
                    //       dataLabels:{  
                    //          enabled :true,//是否在点的旁边显示数据  
                    //          rotation:0  
                    //       },  
                    //       enableMouseTracking:true,//鼠标移到图表上时是否显示提示框  
                    //       events:{//监听点的鼠标事件  
                    //          click: function() {}  
                    //       },  
                    //      marker:{  
                    //           enabled:true,//是否显示点  
                    //           radius:3,//点的半径  
                    //           fillColor:"#888"  
                    //           lineColor:"#000"  
                    //           symbol: ‘url(http://highcharts.com/demo/gfx/sun.png)‘,//设置点用图片来显示  
                    //           states:{  
                    //               hover:{  
                    //                  enabled:true//鼠标放上去点是否放大  
                    //              },  
                    //               select:{  
                    //                  enabled:false//控制鼠标选中点时候的状态  
                    //                }  
                    //             }  
                    //        },  
                    //        states:{  
                    //             hover:{  
                    //             enabled:true,//鼠标放上去线的状态控制  
                    //             lineWidth:3  
                    //             }  
                    //        },  
                    //        stickyTracking:true,//跟踪  
                    //        visible:true,  
                    //        lineWidth:2//线条粗细  
                    //       pointStart:100,  
                    //    }  
                    //},  
                      
                    title: {  
                        text: Monthly Average Temperature,//标题  
                        x: -20 //center设置标题的位置  
                    }, 
                    
                    subtitle: {  
                        text: Source: WorldClimate.com,//副标题  
                        x: -20//副标题位置  
                    },  
                    
                    xAxis: {//横轴的数据  
                        categories: [Jan, Feb, Mar, Apr, May, Jun,  
                            Jul, Aug, Sep, Oct, Nov, Dec],  
                        //lineWidth:1,//纵轴一直为空所对应的轴,即X轴  
                        //plotLines: [{//一条竖线  
                        //     color: ‘#FF0000‘,  
                        //     width: 2,  
                        //     value: 5.5  
                        //}]  
                        //labels: {//设置横轴坐标的显示样式  
                        //     rotation: -45,//倾斜度  
                        //     align: ‘right‘,  
                        //     style: {  
                        //          font: ‘normal 13px Verdana, sans-serif‘  
                        //          color: ‘white‘  
                        //     }  
                        //}  
              
                    },  
                    
                    yAxis: {  
                        //tickInterval: 200,  //自定义刻度  
                        //max:1000,//纵轴的最大值  
                        //min: 0,//纵轴的最小值  
                        title: {//纵轴标题  
                            text: 百分数  
                        },  
                        labels : {  
                            formatter : function() {//设置纵坐标值的样式  
                             return this.value + %;  
                            }  
                        },   
                        plotLines: [{  
                            value: 0,  
                            width: 1,  
                            color: #808080  
                        }]  
                    },
                    
                    tooltip: {//鼠标移到图形上时显示的提示框  
                        formatter: function() {  
                                return <b>+ this.series.name +</b><br/>+  
                                this.x +: + this.y +?°C;  
                        }  
                        //crosshairs:[{//控制十字线  
                        //    width:1,  
                        //    color:"#CCC",  
                        //    dashStyle:"longdash"  
                        //}  
                    },  
                    
                    legend: {//方框所在的位置(不知道怎么表达)  
                        layout: vertical,  
                        align: right,  
                        verticalAlign: top,  
                        x: -10,  
                        y: 100,  
                        borderWidth: 0  
                    },  
                    
                    series: [{//以下为纵轴数据  
                        name: Tokyo,  
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  
                    }, {  
                        name: New York,  
                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]  
                    }, {  
                        name: Berlin,  
                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]  
                    }, {  
                        name: London,  
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]  
                    }]  
                })
            })
        </script>
    </body>
</html>

 

【属性说明】

一、chart的部分属性说明

renderTo: ‘container‘,      //图表的页面显示容器(也就是要显示到的div)
defaultSeriesType: ‘line‘,  //图表类型(line、spline、scatter、splinearea、bar、pie、area、column)
marginRight: 50,            //上下左右空隙(图表跟图框之间)
marginBottom: 60,           //下面空隙如果不够大,图例说明有可能看不到
plotBackgroundImage: ‘../graphics/skies.jpg‘, //(图表的)背景图片
plotBackgroundColor:        //背景颜色
width: 1000,                //图框(最外层)宽(默认800)
height: 500,                //图框高(默认500) 
backgroundColor: "red"      //图框的背景颜色
borderColor: "red"          //图框的边框颜色
borderRadius: 5,            //图框的圆角大小
borderWidth: 9,             //图框的边框大小
inverted: false,            //(使图)倒置
plotBorderColor: "red",     //图表的边框颜色
plotBorderWidth: 0,         //图表的边框大小
plotShadow: false,          //图表是否使用阴影效果
reflow: false,   
shadow:true                 //图框是否使用阴影
showAxes: false,            //是否最初显示轴
spacingTop: 100,            //图表上方的空白
spacingRight: 10,
spacingBottom: 15,
spacingLeft: 10,
colors: [...]                 //图上线。。的颜色

 

二、credits的部分相关属性说明

credits:{//设置右下角的标记。highchart.com (这个也可以在highcharts.js里中修改)    
   //enabled: true,      //是否显示
   position: {           //显示的位置                   
       align: ‘left‘,       
       x: 10                           
   },
   text: "xoyo.com",           //显示的文字
   style:{                     //样式
       cursor: ‘pointer‘,
       color: ‘red‘,
       fontSize: ‘20px‘
   },
   href: ‘http://www.xoyo.com‘, //路径
},

 

三、title的部分相关属性说明

title:{//标题
    text: ‘月份平均温度‘,
    x: -20,                  //center //水平偏移量 
    y: 100                   //y:垂直偏移量
    align: ‘right‘         //水平方向(left, right, bottom, top)
    floating: true,          //是否浮动显示
    margin: 15,
    style: ,                 //样式
    verticalAlign: "left"    //垂直方向(left, right, bottom, top)
},

 

四、xAxis或者YAxis

          categories: [‘一月‘, ‘二月‘],
                //allowDecimals: false
                //alternateGridColor: ‘red‘       //在图表中相隔出现纵向的颜色格栅
                //dateTimeLabelFormats: ,
                //endOnTick: false,               //是否显示控制轴末端的一个cagegories出来
                //events: {
                //setExtremes:
                //},
                //gridLineColor: "red",           //纵向格线的颜色
                //gridLineDashStyle: Solid        //纵向格栅线条的类型
                //gridLineWidth: 5,               //纵向格线的的大小
                //id: null,
                //labels: {  //X轴的标签(下面的说明)
                    //align: "center",              //位置
                    //enabled: false,               //是否显示
                    //formatter: ,
                    //rotation: 90,                 //旋转,效果就是影响标签的显示方向
                    //staggerLines: 4,              //标签的交错显示(上、下)
                    //step: 2,                      //标签的相隔显示的步长
                    //style:{},
                    //x: 100,                     //偏移量,默认两个都是0,
                    //y: 40
                //},
                //lineColor: "red",               //X轴的颜色
                //lineWidth: 5,                   //X轴的宽度
                //linkedTo:1,
                //opposite: true                  //是否把标签显示到对面
                //max: 12,                        //显示的最大值
                //maxPadding: 6,
                //maxZoom: 1,
                //min: 10,                        //显示的最小值
                //minorGridLineColor: ‘red‘,        //副格线的颜色
                //minorGridLineDashStyle: ‘blod‘, //副格线的的颜色
                //minorGridLineWidth: 50,         //副格线的宽度
                //minorTickColor: #A0A0A0,        //???没有看出效果
                minorTickInterval:3,               //副标记的间隔
                //minorTickLength: 10,             //副标记的长度
                //minorTickPosition: ‘inside‘,     //副标记的位置
                //minorTickWidth: 5,               //副标记的宽
                //minPadding: 0.01,
                //offset: 0,                       //坐标轴跟图的距离
                //plotBands: //使某数据块显示不同的效果    
                //plotLines: [{         //标线属性
                    //value: 0,      //值为0的标线
                //}],        
                //tickmarkPlacement: "on",   //标记(文字)显示的位置,on表示在正对位置上。
                //reversed: true,            //是否倒置
                //showFirstLabel: false,     //第一个标记的数值是否显示
                //startOfWeek: 2,
                //tickColor: ‘blue‘,         //标记(坐标的记号)的颜色
                //tickInterval: 20,          //标记(坐标的记号)的步长
                //tickLength: 5,
                //tickmarkPlacement: "on",
                //tickPixelInterval: 1000,   //两坐标之间的宽度
                //tickPosition: "inside",    //坐标标记的方向
                //title: {                   //设置坐标标题的相关属性
                    //margin: 40,
                    //rotation: 90,
                    //text: "Y-values",
                    //align: "middle",
                    //enabled: "middle",
                    //style: {color: ‘red‘}
                //},
                //type: "linear"

 

五、tooltip的部分相关属性说明

          tooltip: {//提示框设置     
                    formatter: function() {  //格式化提示框的内容样式
                        return ‘<b>‘+ this.series.name +‘</b><br/>‘+
                        this.x +‘: ‘+ this.y +‘°C‘;
                    },                       
                    backgroundColor: ‘#CCCCCC‘,   //背景颜色
                    //borderColor: ‘#FCFFC5‘      //边框颜色
                    //borderRadius: 2             //边框的圆角大小
                    borderWidth: 3,               //边框宽度(大小)
                    //enabled: false,             //是否显示提示框
                    //shadow: false,              //提示框是否应用阴影  ?没有看出明显效果?????????
                    //shared: true,               //当打开这个属性,鼠标几个某一区域的时候,如果有多条线,所有的线上的据点都会有响应(ipad)
                    //snap: 0,                    //没有看出明显效果?????????
                    crosshairs: {                 //交叉点是否显示的一条纵线
                        width: 2,
                        color: ‘gray‘,
                       dashStyle: ‘shortdot‘
                    }
                    style: {  //提示框内容的样式
                        color: ‘white‘,
                        padding: ‘10px‘,    //内边距 (这个会常用到)
                        fontSize: ‘9pt‘,            
                    }
                },

 

六、legend(图例说明)的部分相关属性说明

          legend:{//图例说明  
                    //layout: ‘vertical‘,   //图例说明布局(垂直显示,默认横向显示)
                    align: ‘center‘,        //图例说明的显示位置
                    //verticalAlign: ‘top‘, //纵向的位置
                    //x: 250,                 //偏移量 
                    //y: 0,               
                    borderWidth: 1,            //边框宽度
                    //backgroundColor: ‘red‘   //背景颜色
                    borderColor: ‘red‘,
                    //borderRadius             //边框圆角
                    //enabled: false          //是否显示图例说明
                    //floating:true           //是否浮动显示(效果就是会不会显示到图中)
                    //itemHiddenStyle: {color: ‘red‘},
                    //itemHoverStyle: {color: ‘red‘}   //鼠标放到某一图例说明上,文字颜色的变化颜色
                    //itemStyle:  {color: ‘red‘}   //图例说明的样式
                    //itemWidth:                   //图例说明的宽度
                    //labelFormatter: function() { return this.value}       //?????????????默认(return this.name)
                    //lineHeight: 1000             //没看出明显效果
                    //margin: 20
                    //reversed:true                //图例说明的顺序(是否反向)
                    //shadow:true                  //阴影
                    //style: {color:‘black‘}
                    //symbolPadding: 100           //标志(线)跟文字的距离
                    //symbolWidth: 100             //标志的宽
                    //width:100
                },

 

七、plotOptions的部分相关属性说明

           plotOptions:{ //柱形图相关的 
                    column: {//柱形图
                        //pointPadding: 0.2,
                        //borderWidth: 1,               //柱子边框的大小
                        //borderColor: "red",           //柱子边框的颜色
                        //borderRadius: 180,            //柱子两端的圆角的半径
                        //colorByPoint: true,           //否应该接受每系列的一种颜色或每点一种颜色
                        groupPadding: 0,                //每一组柱子之间的间隔(会影响到柱子的大小)
                        //minPointLength: 0,            //最小数据值那一条柱子的长度(如果是0,可能看不到,可以设置出来)
                        //pointPadding: 0.1,            //柱子之间的间隔(会影响到柱子的大小)
                        //pointWidth: 2,                //柱子的大小(会影响到柱子的大小)
                        //allowPointSelect: false, 
                        //animation: true,              //图形出来时候的动画
                        //color: ‘red‘,                 //柱子的颜色
                        //connectNulls: false,          //连接图表是否忽略零点(如线形图,数据为0是是否忽略)
                        //cursor: ‘‘,                   //?????????游标
                        //dashStyle: null,
                        dataLabels: { //图上是否显示数据标签
                        //enabled: true,
                        align: "center",
                        //color: ‘red‘,
                        formatter: function() 
                        {
                            return this.y + ‘mm‘
                        },
                        rotation: 270,
                        //staggerLines: 0,
                        //step: ,
                        //style: ,
                        //x: 0,
                        //y: -6
                        },
                        //enableMouseTracking: 
                        events: {    //事件
                        click: function(event)
                        {
                            alert(this.name);
                        },
                        //checkboxClick: ,
                        //hide: ,
                        //legendItemClick: ,
                        //mouseOver: ,
                        //mouseOut: ,
                        //show:
                        },
                        //id: null,
                        //lineWidth: 20,
                        //marker: {  //图例说明上的标志
                        //enabled: false
                        //},
                        point: {     //图上的数据点(这个在线形图可能就直观)
                        events: {
                            click: function() 
                            {
                            alert(this.y);
                            },
                            //mouseOver: ,
                            //mouseOut: ,
                            //remove: ,
                            //select: ,
                            //unselect: ,
                            //update:
                            }
                        },
                        //pointStart: 0,     //显示图数据点开始值
                        //pointInterval: 1,  //显示图数据点的间隔
                        //selected: false,
                        //shadow: true,
                        //showCheckbox: true,  //是否显示(图例说明的)复选框
                        //showInLegend: false, //是否显示图例说明
                        //stacking: ‘percent‘, //是否堆积???
                        states:{
                            hover:{
                                //brightness: 0.1,
                                enabled: true,    //图上的数据点标志是否显示
                                //lineWidth: 2,    //没看出效果
                                marker: {
                                    //states: ,
                                    //enabled: true,         //数据点标志是否显示
                                    //fillColor: null,       //数据点标志填充的颜色
                                    //lineColor: "#FFFFFF",  //数据点标志线的颜色
                                    //lineWidth: 0,          //数据点标志线的大小
                                    //radius: 45,            //数据点标志半径
                                    //symbol: ‘triangle‘//‘url(http://highcharts.com/demo/gfx/sun.png)‘ //数据点标志形状(triangle三角形,或者用图片等等)
                                }
                            }
                        }
                    },
                    //stickyTracking: true,  //轨道粘性 (例如线图,如果这个设置为否定,那就必须点到数据点才有反应)
                    //visible: true,         //设置为false就不显示图
                    //zIndex: null           //没有看出效果???
                },

 

Highcharts的一些属性

标签:lines   鼠标   alert   www   idt   int   mouseover   source   最大   

原文地址:https://www.cnblogs.com/rachelch/p/8350661.html

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