效果:
1 2 3 4 5 11 12 13 14 php15 $y_max = 12000; //Y坐标最大值16 ?>17 class="svg">18 class="axis" zIndex="2">19 20 21 php 22 // 绘制x坐标23 $delta = (960 - 60) / 24;24 for($i = 0; $i <24; $i++) {25 $x = 80 + $delta * $i;26 ?>27 28 29 30 php 31 // 绘制x坐标文字32 $delta = (960 - 60) / 12;33 for($i = 0; $i <12; $i++) {34 $x = 80 + $delta * $i;35 $text = $i*2;36 if($text <10) {37 $text = ‘0‘ . $text;38 }39 ?>40 =$text?>:0041 42 43 44 php 45 // 绘制x坐标文字46 $delta = (160 - 10) / 3;47 for($i = 0; $i <3; $i++) {48 $y = 10 + $delta * $i;49 $text = $y_max / 3 * (3 - $i);50 $text = ceil($text);51 ?>52 53 =$text?>54 55 56 57 58 php59 $data = array();60 for($i = 0; $i <24; $i++) {61 $data[] = rand(0, $y_max);62 }63 ?>64 65 php66 $delta_x = (960 - 60) / 24; //刻度间隔67 $y_start = 0;68 $line_point = ‘‘;69 $line_point_tip = ‘‘;70 foreach($data as $k=>$v) {71 $x = 80 + $delta_x * ($k);72 $y = (150 * $v) / $y_max;73 $y = 150 - $y;74 if(‘0‘ == $k) {75 $y_start = "M 80 $y";76 } else {77 $line_point .= " L $x $y";78 }79 $line_point_tip .= ‘ ‘ . $v;80 }81 ?>82 class="polyline" zIndex="3">83 84 85 86 87 88