HighCharts使用
写了个Highcharts Example
<html>
<head>
<title>Highcharts Example</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="highcharts.js"></script>
<script language="javascript" type="text/javascript" src="exporting.src.js"></script>
<script type="text/javascript">
/**
* 配置参数对象，可灵活修改
*/
function chartOptions(id,type,title,xText,yText,seriesName,seriesData){
this.renderTo=id;
this.type = type;
this.title = title;
this.xText=xText;
this.yText=yText;
this.seriesName =seriesName;
this.seriesData=seriesData;
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// 构造数据及设置报表配置
var data = [], i;
for (i = -6; i <= 0; i++) {
data.push({
x: Number(7+i),
y: Math.random() * 1000
});
}
var chat = new chartOptions('container','spline','Chris制作','单位：天','单位：RMB','cost',data);
//doHighChart('container','spline','<b>Chris制作</b>','单位：天','单位：RMB',function(){},'cost',data);
doHighChart(chat);
});
var chart;
function doHighChart(chartOptions){
chart = new Highcharts.Chart({
chart: {
renderTo: chartOptions.renderTo,
// marginRight: 10,
events: {
click: function() {
}
}
},
title: {
text: chartOptions.title
},
xAxis: {
title: {
text:chartOptions.xText
},
categories:['星期日','星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
plotLines: [{
value: 0,
width: 20,
color: '#808080'
}]
},
yAxis: {
title: {
text:chartOptions.yText
},
plotLines: [{
value: 1,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
type: chartOptions.type,
name: chartOptions.seriesName,
data: chartOptions.seriesData
}]
});
}
</script>
</head>
<body>
<div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>