Highcharts 折线统计图
先看效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/highcharts.js"></script>
<script type="text/javascript" src="./js/modules/exporting.js"></script>
<script type="text/javascript">
$(function (){
var datas="[[1377532800000,4388.00],[1377619200000,4388.00],[1377705600000,4799.00],[1379347200000,4699.00],[1381680000000,4588.00],[1383840000000,4488.00],[1384099200000,4388.00],[1385308800000,4288.00],[1385913600000,4188.00],[1386604800000,4088.00],[1386777600000,3988.00],[1387123200000,4088.00],[1387728000000,4088.00]]";
//也可以使用这种方法 $('#container').highcharts({ });
//设置全局参数
Highcharts.setOptions({
global : {
useUTC : false
}
});
var chart=new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
margin:[20,10,50,60]
},
colors: [
'#ff0000',
'#50B432',
'#ED561B',
'#DDDF00',
'#24CBE5',
'#64E572',
'#FF9655',
'#FFF263',
'#6AF9C4'
],
loading:{
hideDuration:1000,
showDuration:1000
},
title: {
text: '',
x: -20
},
subtitle: {
text: '',
x: -20
},
global : {
useUTC : false
},
xAxis: {
//reversed :true,
type: 'datetime',
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
//startOfWeek:3,
//maxZoom: 14 * 24 * 3600000, // fourteen days
//offset:0.05,
//opposite:false,
//tickPosition:'outside',
//minorTickInterval: 'auto',//设置是否出现纵向小标尺
//minorGridLineColor:'#E0E0E0',
maxPadding : 0.05,
minPadding : 0.05,
tickInterval :7*24 * 3600000,//两天画一个x刻度
//或者150px画一个x刻度，如果跟上面那个一起设置了，则以最大的间隔为准
//tickPixelInterval : 150,
tickWidth:1,//刻度的宽度
//tickColor : 'rgb(192,192,192)',//自定义刻度颜色
//自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
//lineColor : '#ff0000',//Z轴线的颜色
lineWidth :1,//自定义x轴宽度
//showLastLabel: true,
endOnTick:false,
//showFirstLabel: false,
startOnTick: true,
gridLineColor:'rgb(192,192,192)',
gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
labels: {
//maxStaggerLines:2,
//staggerLines: 2,
step: 1,
//rotation:45,
align: "center",
/*format: Highcharts.dateFormat('%Y-%m-%d', '{value}')*/
formatter: function() {
return Highcharts.dateFormat('%m-%d', this.value);
}
}
},
yAxis: {
startOnTick:false,
endOnTick:false,
tickPixelInterval:25,
tickColor : '#008000',
tickWidth :5,
title: {
text: ''
},
//minorGridLineColor: '#C5EEFA',
//minorTickInterval: 'auto',
gridLineDashStyle: 'shortdash', //longdash
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
lineColor:'rgb(192,192,192)',
lineWidth:1
//labels:{
// x : 25
//}
},
tooltip: {
borderColor:'#ff0000',
borderWidth:2,
style:{color:'#ff0000'},
formatter: function() {
//也可以用Highcharts.numberFormat(this.percentage, 2) //2表示精确到小数点后2位
//替换Math.round(this.percentage)
var date=Highcharts.dateFormat('%Y-%m-%e',this.x);
return '<b>'+date+'</b><br/><b> 价格:'+fmoney(this.y, 3) +'</b><br/>'+'';
}
},
legend: {
enabled:false,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderColor:'rgb(250,0,0)',
borderWidth: 0
},
series: [{
name: 'price',
data: eval(datas),
marker:{
symbol:'circle'//'url(./1.gif)circle'
},
enabled:true
}],
credits:{
enabled:false
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
}
});
});
function fmoney(s, n){
n = n > 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")) + "";
var l = s.split(".")[0].split("").reverse();
var r = s.split(".")[1];
var t = "";
for(i = 0; i < l.length; i ++ )
{
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
t=t.split("").reverse().join("");
if(typeof(r) != "undefined"){
t=t+ "." + r;
}
return t;
}
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>