highcharts动态提示框_百度知道
highcharts动态提示框
在Highcharts官方实例：里，怎样实现当鼠标悬停到数据点上时，提示框显示该数据点的信息，不继续运动；当鼠标移开时，提示框继续运动。
若以下回答无法解决问题，邀请你更新回答
我有更好的答案求助知道网友
1、参考例子：2、建议去官网论坛提问，百度回复较少（）。
本回答被网友采纳
1条折叠回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。欢迎您！“一八软件网”是上海趋唯事软件有限公司的在线软件销售和服务网站
当前位置：&&&&&&
Highcharts点击系列上的点弹出自定义对话框收录时间：日 | 来源：一八软件网 | 作者：趋唯事图表通常是帮助我们用来看数据的分布和趋势，但有时我们想查看某一点的具体数据，这时我们可以用点击事件异步弹出一个对话框，你可以随意显示你想要的数据。要完成这一个功能，我们只要在的一个Options参数中增加以下代码即可：& & & & & & plotOptions: {& & & & & & & & series: {& & & & & & & & & & cursor: 'pointer',& & & & & & & & & & point: {& & & & & & & & & & & & events: {& & & & & & & & & & & & & & click: function() {& & & & & & & & & & & & & & & & hs.htmlExpand(null, {& & & & & & & & & & & & & & & & & & pageOrigin: {& & & & & & & & & & & & & & & & & & & & x: this.pageX,& & & & & & & & & & & & & & & & & & & & y: this.pageY& & & & & & & & & & & & & & & & & & },& & & & & & & & & & & & & & & & & & headingText: this.series.name,& & & & & & & & & & & & & & & & & & maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':'+this.y +' visits',& & & & & & & & & & & & & & & & & & width: 200& & & & & & & & & & & & & & & & });& & & & & & & & & & & & & & }& & & & & & & & & & & & }& & & & & & & & & & },& & & & & & & & & & marker: {& & & & & & & & & & & & lineWidth: 1& & & & & & & & & & }& & & & & & & & }& & & & & & },
上海趋唯事软件有限公司
销售：021 -
技术：021 -
邮件：sales(#)commuch.com
联系我们： 021 -分享一个ajax highcharts示例 - ThinkPHP框架
网上找了很多示例，一直没有成功，最主要是卡在json数据转换成highcharts数据列格式，最开始是不知道如何把json数据转换为相应的X、Y数据，好不容易找到答案后，发现转换出来的数据highcharts显示不了，发现是转换后的highcharts数据包括双引号（[&20&,&30&,&40&]），后来利用js中的parseInt转换数据格式（[20,30,40]）才正常显示。
总的来说还是基础不扎实，一对json数据格式不了解，二是第一次使用highcharts，第三是对js数据格式不了解，走了很多弯路，希望大家别走这样的弯路了$(&#floor&).change(function(){
&&&&&&&&&&&&var&lastdata&=&[];
&&&&&&&&&&&&var&a=$(this).val();
&&&&&&&&&&&&var&b=$(&#building&).val();
&&&&&&&&&&&&var&c=$(&#city&).val();
&&&&&&&&&&&&var&xset&=new&Array();//X轴数据集&&
&&&&&&&&&&&&var&yset&=new&Array();//Y轴数据集
&&&&&&&&&&&&$.ajax({
&&&&&&&&&&&&&&&&data:{floor:a,building:b,city:c},
&&&&&&&&&&&&&&&&datatype:&POST&,
&&&&&&&&&&&&&&&&url:&__APP__/index/index/floorselect&,
&&&&&&&&&&&&&&&&success:function(data){
&&&&&&&&&&&&&&&&&&&&var&i,len=data.&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&for(&i=0;i&i++){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&yset[i]&=&parseInt(data[i].num);&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&xset[i]&=&data[i].time.substr(5,8);&
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&console.log(xset);&&&
&&&&&&&&&&&&&&&&&&&&console.log(yset);&
&&&&&&&&&&&&&&&&&&&&showChart(xset,yset);&
&&&&&&&&&&&&&&&&&&&&function&showChart(xset,yset){&&
&&&&&&&&&&&&&&&&&&&&&&&&var&chart&=&new&Highcharts.Chart({&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&chart:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&renderTo:&'container',&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&'line',&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&marginRight:&130,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&marginBottom:&85&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&xAxis:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&categories:&xset&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&yAxis:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&title:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&text:&'人数'&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&plotLines:&[{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&value:&0,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&width:&1,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&color:&'#9;&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}]&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&tooltip:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&formatter:&function()&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&return&'&b&'+&this.series.name&+'&/b&&br/&'+&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&this.x&+':&'+&this.y;&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&legend:&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&layout:&'vertical',&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&align:&'right',&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&verticalAlign:&'top',&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&x:&-10,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&y:&100,&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&borderWidth:&0&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&series:&[{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&name:&'时间',&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:&yset
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}]&&
&&&&&&&&&&&&&&&&&&&&&&&&});&&
&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&});
&&&&&&&&})代码的大意是通过下拉列表向后台选中相应的值，后台ajax返回json数据，将返回的json分别转换为highcharts的X，Y数据列，
这里不知道json返回的数值是带双引号的，所以要用parseInt改变数据格式，去掉双引号才行，至于为什么会有双引号，就需要大神来解答了，也许是ajaxreturn返回的字符串格式把
积分：2709
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。%@&page&language="java"&contentType="text/&charset=UTF-8"&&
&&&&pageEncoding="UTF-8"%&&
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&HTML&4.01&Transitional//EN"&"http://www.w3.org/TR/html4/loose.dtd"&&
&http-equiv="Content-Type"&content="text/&charset=UTF-8"&&
Highcharts&Demo&&
&type="text/javascript"&src="js/jquery.min.js"&&
&type="text/javascript"&src="js/highcharts.js"&&
&type="text/javascript"&src="js/excanvas.compiled.js"&&
&type="text/javascript"&&
$(document).ready(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&''+&this.series.name&+''+&&
&&&&&&&&&&&&&&&&&&&&this.x&+':&'+&this.y&+'&A&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]&&
&&&&&&&&}]&&
&id="container"&&&
属性说明【部分】
一.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&&&&&&&&&&&//没有看出效果？？？&&&&},
阅读(...) 评论()}