注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

php 王建

php之路

 
 
 

日志

 
 

js 生成图表 Highcharts  

2013-03-15 19:47:37|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

有时候为了统计,会显示一些曲线图了 或者是饼状图了等,用的是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
  评论这张
 
阅读(779)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018