js 生成图表
有时候为了统计,会显示一些曲线图了 或者是饼状图了等,用的是hightcharts
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js hightcharts</title>
<script src="jquery-1.4.2.min.js" type="text/javascript" ></script>
<script src="highcharts/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var yData = [{text:\'qq\',unit:\'个\'}]; //Y抽
var yAxisObj = return_y(yData);//调用Y轴方法
var chart = new Highcharts.Chart({
chart: {
renderTo: \'container\',
type: \'line\',
borderWidth: 0,
plotBorderWidth: 0,
marginBottom: 100
},
title: {
text: "我的测试哈"
},
subtitle: {
text: "测试12233"
},
xAxis: {
categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\', \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\']
},
yAxis: yAxisObj,
tooltip: {
formatter: function() {
return \'<b>\'+ this.series.name +\'</b><br/>\'+
this.x +\': \'+ this.y +\' \';
}
},
plotOptions: {
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name:\'qq\',
type:\'\',
yAxis: 0,
}]
});
});
//定义y轴,及其单位
function return_y(yData){
var colors = Highcharts.getOptions().colors;
var tmp = \'\';
if(yData.length==1)
{
tmp += "{";
tmp += "title: {text: \'"+yData[0].text+"\',style: {color: colors[0]}},";
tmp += "labels: {formatter: function() {return this.value +\'"+yData[0].unit+"\';},style: {color: colors[0]}}";
tmp += "}";
}
else{
tmp += "[";
for(var i=0;i<yData.length;i++)
{
tmp += "{";
tmp += "title: {text: \'"+yData[i].text+"\',style: {color: colors[0]}},";
tmp += "labels: {formatter: function() {return this.value +\'"+yData[i].unit+"\';},style: {color: colors[0]}},";
if(yData[i].opposite)
tmp += "opposite: true";
else
tmp += "opposite: false";
if(i<yData.length-1)
tmp += "},";
else
tmp += "}";
}
tmp += "]";
}
var yAxisObj = eval(\'(\'+tmp+\')\');
return yAxisObj ;
}
</script>
</head>
<body>
<div id="container" style="height: 400px; border:solid 1px"></div>
</body>
</html>
demo下载地址:http://57sy.com/content/uploadfile/201303/190756e9aee4ab77cb78630811d07ad020130315114134.zip