hightcharts属性说明

hightcharts属性说明,第1张

概述一.chart的部分相关属性说明     renderTo: 'container',      //图表的页面显示容器(也就是要显示到的div)     defaultSeriesType: 'line',  //图表类型(line、spline、scatter、splinearea、bar、pie、area、column)     marginRight: 50,            //上

一.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,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,        //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           //没有看出效果???     },

总结

以上是内存溢出为你收集整理的hightcharts属性说明全部内容,希望文章能够帮你解决hightcharts属性说明所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1090130.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存