首页 > 代码库 > heightchart配置详解
heightchart配置详解
<div id="container" style="width: 100%; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var d=[‘Jan12‘, ‘Feb13‘, ‘Mar14‘, ‘Apr‘, ‘May‘, ‘Jun‘,
‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘,‘Dec‘,‘Dec‘,‘Dec‘,‘Dec‘];
var exporting={buttons:{exportButton:{enabled:true,}}};
var credits={
href:false,
enabled:false,
text:true//不显示连接
};
var legend = {
enabled: false
};
var title = {
text: ‘成长足迹‘
};
var xAxis = {
title: {
text: ‘ ‘
},
labels: {
enabled: false,//刻度值不显示
},
tickWidth:0,//刻度标签不显示
lineColor:‘#FFFFFF‘,
lineWidth: 0,
categories:d,
};
var a=xAxis.categories;
var c=a.length*100;
$("#container").css(‘height‘,c+"px");
var b=[];
for(var i=0;i<a.length;i++){
b[i]=10;
}
var yAxis = {
title: {
text: ‘Temperature (\xB0C)‘
},
title: {
text: ‘ ‘
},
labels: {
enabled: false,//刻度值不显示
},
tickWidth:0,//刻度标签不显示
lineColor:‘#FFFFFF‘,
lineWidth: 0,
plotLines: [{
value: 0,
width: 1,
color: ‘#808080‘
}]
};
var plotOptions = {
series: {
lineWidth:5,
allowPointSelect :true,
animation:true,
//lineColor:‘blue‘,
enableMouseTracking:true,//显示提示框
marker: {
enabled:true,
radius: 10,//点的大小
//fillColor: ‘#DD7272‘,
lineColor: ‘#DEECF9‘,
lineWidth:5,
//shadow:true,
states:{
hover:{
radius: 20,
enabled:true,
}
}
}
}
};
var tooltip = {
valueSuffix: ‘\xB0C‘,
pointFormat:‘‘,
pointFormatter: function() {
return d[this.x];
}
}
var series = [
{
//name: ‘Tokyo‘,
data:b
}
];
var json = {};
var chart={
inverted: true,
};
json.exporting=exporting;
json.credits=credits;
json.chart=chart;
json.legend = legend;
json.plotOptions=plotOptions;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.series = series;
$(‘#container‘).highcharts(json);
});
heightchart配置详解