57sy

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

分类:

技术点:

相关文章:

  • 2021-09-11
  • 2021-08-27
  • 2022-03-09
  • 2022-02-03
  • 2021-11-14
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-08-06
  • 2021-10-02
  • 2021-10-19
  • 2022-12-23
  • 2021-08-27
  • 2021-08-23
相关资源
相似解决方案