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

posted on 2013-03-15 19:38  一根烟的寂寞  阅读(301)  评论(0)    收藏  举报

导航