highcharts 整理记录
代码 1.1
· jquery-1.8.3.min.js
· highcharts.js
· highcharts-more.js
//配置代码
$(function () {
$('#container').highcharts({
title: {
text: '血压值'
},
xAxis: {
categories: ['2014-07-01', '2014-07-02', '2014-07-03', '2014-07-04', '2014-07-05', '2014-07-06', '2014-07-07', '2014-07-08', '2014-07-09', '2014-07-10', '2014-07-11', '2014-07-12'],
tickmarkPlacement:'on'
},
credits:{
enabled:false
},
yAxis: {
title: {
text: ''
},
min:0
},
tooltip: {
formatter:function(){
return "日期:" + this.x+"<br>高压:"+this.point.high + "<br>低压:" + this.point.low;
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y;
}
}
}
},
legend: {
enabled: false
},
series: [{
type:'columnrange',
name: '血压值',
data: [
[99, 120],
[65, 87],
[35, 94],
[19, 199],
[0, 22],
[29, 39],
[30, 92],
[26, 73],
[18, 44],
[21, 31],
[22, 40],
[33, 98]
]
}]
});
$(".divSize").click(function(){
$("#container").width("800px");
});
$(".divSize2").click(function(){
$("#container").width("400px");
});
$(".redraw").click(function(){
var chart = $('#container').highcharts();
chart.reflow();
});
});
//html
<div id="container" style="width:400px;height:400px;border:1px solid #ccc"></div>
<button class="divSize">容器变大</button>
<button class="divSize2">容器变小</button>
<button class="redraw">图标适应容器</button>