JS 画饼图，折线图
浏览数：75 /
时间：2015年06月09日
网址：
http://www.hcharts.cn/demo/index.php
效果图：
它的网址里面都很全的。简单实用扣代码即可
使用时注意数据格式即可
1 //获取mood_evalue的百分比 2 $total_mood_evalue = 0; 3 //初始化key的数组，统计key的百分比 4 $mood_key_arr = array(); 5 6 //1-5分别对应值1-5； 7 $mood_evalue_1 = $mood_evalue_2 = $mood_evalue_3 = $mood_evalue_4 = $mood_evalue_5 = 0; 8 foreach ($info as $key => $value) { 9 $total_mood_evalue++; 10 switch ($value[‘mood_evalue‘]) { 11 case 1: 12 $mood_evalue_1++; 13 $info[$key][‘mood_evalue_str‘] = ‘很好‘; 14 break; 15 case 2: 16 $mood_evalue_2++; 17 $info[$key][‘mood_evalue_str‘] = ‘好‘; 18 break; 19 case 3: 20 $mood_evalue_3++; 21 $info[$key][‘mood_evalue_str‘] = ‘一般‘; 22 break; 23 case 4: 24 $mood_evalue_4++; 25 $info[$key][‘mood_evalue_str‘] = ‘不好‘; 26 break; 27 case 5: 28 $mood_evalue_5++; 29 $info[$key][‘mood_evalue_str‘] = ‘很差‘; 30 break; 31 default: 32 break; 33 } 34 $mood_key_arr[] = $value[‘mood_key‘]; 35 } 36 $mood_evalue_percent = array( 37 array(‘很好‘,round($mood_evalue_1 / $total_mood_evalue * 100,2)), 38 array(‘好‘,round($mood_evalue_2 / $total_mood_evalue * 100,2)), 39 array(‘一般‘,round($mood_evalue_3 / $total_mood_evalue * 100,2)), 40 array(‘不好‘,round($mood_evalue_4 / $total_mood_evalue * 100,2)), 41 array(‘很差‘,round($mood_evalue_5 / $total_mood_evalue * 100,2)), 42 );
将值json处理即可，或者使用js来格式化数据
补充：
Highcharts 跟 Highstock 效果不一样。使用方法大体一致
自己简单总结的，不一定对
1 chart 2 type : ‘line‘ 曲线图, 3 ‘area‘ 区域图, 4 ‘areaspline‘ 曲线区域图 5 ‘arearange‘ 区域范围图 6 ‘column‘ 柱形图 7 ‘bar‘ 条形图 8 ‘pie‘ 饼图，饼图跟其他的不一样，不仅仅指定type。 9 inverted: 是否反转x，y轴；(true,false) 10 11 title 12 text : ‘主标题文字‘ 13 x:文字定位x, 14 y:文字定位y轴, 15 16 subtitle 17 text : ‘副标题文字‘ 18 x:文字定位x, 19 y:文字定位y轴, 20 21 legend（对说明的配置，即蓝色线图代表的文字意义之类的） 22 layout : ‘vertical‘ 表示垂直放置，不设置即水平的 23 align : 水平位置 24 verticalAlign: 垂直位置 25 x: 定位x 26 y: 定位y 27 floating: 是否浮动，true表示真，false表示不浮动 28 borderWidth: 边框宽度，数字 29 backgroundColor: 背景色 30 31 xAxis 32 title { 33 text: ‘x轴说明文字‘ 34 }, 35 min 如果是数值，那么最小值 36 max 如果是数值，那么最大值 37 categories 自定义x轴值，是个数组 38 39 yAxis (y轴的数据，是根据series下的data来自动填充的，如果需要格式化显示，labels--formatter) 40 title { 41 text: ‘y轴说明文字‘ 42 }, 43 plotLines [//y轴自定义绘制线条，每个值都是一个对象 44 { 45 value 对应y轴数据，即定义线条的位置 46 width 线条宽度 47 color 颜色 48 } 49 ], 50 labels:{ 51 formatter:function() {//格式化显示数据,除了value变量外，还有axis(对象)、chart（对象）、isFirst（boolean）、isLast（boolean）可用 52 return this.value + 跟对应的操作，this.value 对应个就是y轴的值 53 }, 54 enabled: true表示展示该轴，false表示不展示 55 step:显示间隔，假如数值为1，2，3，4，5 ，设置为2只展示1，3，5 56 staggerLines:水平轴Lables显示行数。（该属性只对水平轴有效）当Lables内容过多时，可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。 57 } 58 59 60 61 tooltip:（对提示的配置，即鼠标悬浮时的提示） 62 crosshairs: 曲线图，显示竖条 （true,false） 63 valueSuffix: 添加后缀标识符 64 shared: true 展示对应列所有的数据，false 单单展示鼠标放置点的数据 65 66 headerFormat: 指定html文档的开始 67 pointFormat: 指定html中间信息 68 footerFormat: 指定html格式的结尾 69 userHTML: 是否开启html格式解析 70 71 series:值是个数组,数组里面一个值是个对象 72 [ 73 { 74 name: ‘‘, 数据的展示名称 75 data: [], 数据的值//null 表示没有，0表示0，不一样 76 }, 77 {} 78 ]
在项目中使用（备）：
1 $.extend({ 2 table_png : function(res) {//曲线图图通用 3 Highcharts.setOptions({ 4 global: { 5 useUTC: false //关闭文件默认时区，采用数据时间显示 6 } 7 }); 8 res._this.highcharts(‘StockChart‘, { 9 title : { 10 text : res.title 11 }, 12 credits : { 13 enabled : false, 14 }, 15 exporting: { 16 enabled : false, 17 }, 18 rangeSelector: { 19 buttons : [ 20 { 21 type: ‘week‘, 22 count: 1, 23 text: ‘一星期‘ 24 }, { 25 type: ‘month‘, 26 count: 1, 27 text: ‘一个月‘ 28 }, { 29 type: ‘month‘, 30 count: 6, 31 text: ‘半年‘ 32 }, { 33 type: ‘year‘, 34 count: 1, 35 text: ‘一年‘ 36 }, { 37 type: ‘all‘, 38 text: ‘全部‘ 39 }, { 40 type: ‘ytd‘, 41 text: ‘今天‘ 42 } 43 ], 44 enabled : true, 45 buttonTheme: { 46 width:80, 47 }, 48 selected: 0, 49 allButtonsEnabled : false, 50 inputDateFormat: ‘%Y-%m-%d‘, 51 inputEditDateFormat: ‘%Y-%m-%d‘, 52 }, 53 legend : { 54 enabled: true, 55 backgroundColor: ‘#fff‘, 56 borderWidth:1, 57 layout: ‘vertical‘, 58 verticalAlign: ‘center‘, 59 x:450, 60 y:300 61 }, 62 xAxis : { 63 labels : { 64 format : ‘{value:%Y-%m-%d}‘, 65 rotation: 30, 66 align: ‘left‘, 67 style : { 68 fontWeight : ‘bold‘, 69 } 70 }, 71 title : { 72 text : ‘日期‘, 73 align: ‘high‘, 74 }, 75 }, 76 77 yAxis : { 78 title : { 79 text : ‘值（‘+res.y_sign+‘）‘, 80 rotation: 0, 81 x:10, 82 y:-70, 83 }, 84 labels : { 85 format : ‘{value}‘, 86 }, 87 alternateGridColor: ‘#FDFFD5‘, //隔区变色 88 opposite: true, //y轴位置 left right 89 offset: 50, //y轴与数据区位置 90 }, 91 tooltip: { 92 enabled: true, 93 // type: ‘datetime‘, 94 // dateTimeLabelFormats:{ 95 // day:‘%Y-%m-%d‘ 96 // }, 97 formatter: function() { 98 var s = ‘<b>‘ + Highcharts.dateFormat(res.tool_format, this.x) + ‘</b>‘; 99 $.each(this.points, function() { 100 s += ‘<br/>‘ + ‘<tspan style="fill:‘ + this.series.color + ‘;" x="8" dy="16">●</tspan>‘ + this.series.name + ‘:‘ + this.y; 101 }); 102 return s; 103 }, 104 crosshairs: [true, true], /*x+y数据标尺*/ 105 crosshairs: { 106 dashStyle: ‘dash‘, 107 /*数据 标尺线样式*/ 108 color: ‘red‘, 109 } 110 }, 111 /*下部时间拖拉选择*/ 112 navigator: { 113 enabled: true, 114 /*关闭时间选择*/ 115 baseseries: 10 116 }, 117 /*数据点设置*/ 118 plotOptions: { 119 series: { 120 marker: { 121 enabled: true, 122 /*数据点是否显示*/ 123 radius: 2, 124 /*数据点大小px*/ 125 fillColor:‘#000‘ /*数据点颜色*/ 126 }, 127 dataLabels: { 128 enabled: false, 129 /*在数据点上显示数值*/ 130 format: ‘{y}‘ 131 }, 132 // enableMouseTracking: false /*关闭tip层*/ 133 } 134 }, 135 scrollbar: { 136 enabled: true /*关闭下方滚动条*/ 137 }, 138 series : res.data_obj 139 }); 140 }, 141 date_format : function(now) { 142 return new Date(now).getTime(); 143 }, 144 pie_png : function(res) {//饼状图 145 res._this.highcharts({ 146 chart: { 147 plotBackgroundColor: null, 148 plotBorderWidth: null, 149 plotShadow: false 150 }, 151 title: { 152 text: res.title, 153 }, 154 tooltip: { 155 pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘ 156 }, 157 plotOptions: { 158 pie: { 159 allowPointSelect: true, 160 cursor: ‘pointer‘, 161 dataLabels: { 162 enabled: true, 163 color: ‘#000000‘, 164 connectorColor: ‘#000000‘, 165 format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘ 166 } 167 } 168 }, 169 credits : { 170 enabled : false, 171 }, 172 series: [{ 173 type: ‘pie‘, 174 name: res.series_name, 175 data: res.series_data, 176 }] 177 }); 178 } 179 });
调用：
//直接写在tpl模板文件中的，
1 <script type="text/javascript"> 2 $(document).ready(function() { 3 var data_arr = []; 4 var arr_temp = []; 5 $.ajax({ 6 url : THINK.URL + ‘/ajaxWeight‘,//THINK.URL 是通过js传值过来的 7 type : ‘get‘, 8 dataType : ‘json‘, 9 data : {‘user_id‘:<?php echo $info[‘user_id‘];?>}, 10 beforeSend : function() { 11 $(‘#table_png‘).html(‘加载数据中...‘); 12 }, 13 success : function(res) { 14 if(res) { 15 $.each(res,function(i,n) { 16 arr_temp = []; 17 arr_temp.push($.date_format(n.weight_date)); 18 arr_temp.push(parseFloat(n.weight)); 19 data_arr.push(arr_temp);
//或者直接 data_arr.push([$.date_format(n.weight_date),parseFloat(n.wieght)]); 20 }); 21 $.table_png({ 22 _this : $(‘#table_png‘), 23 title : ‘用户体重折线图‘, 24 data_obj : [{ 25 name : ‘用户体重‘, 26 data : data_arr, 27 }], 28 y_sign : ‘kg‘, 29 }); 30 }else { 31 $(‘#table_png‘).html(‘没有找到任何数据‘); 32 } 33 } 34 }); 35 }); 36 37 </script>
服务器端：
1 //ajax用户体重图表数据 2 public function ajaxWeight() { 3 $user_id = I(‘get.user_id‘,0); 4 5 //检查权限 6 $this->_checkPower($user_id); 7 8 $map[‘user_id‘] = $user_id; 9 //获取体重详情 10 $user_weight_model = M(‘user_weight‘); 11 $weight_info = $user_weight_model->field(‘weight_date,weight‘)->where($map)->order(‘weight_date asc‘)->select(); 12 if($weight_info === false) 13 die(‘error:服务器查询用户体重信息失败‘); 14 15 echo json_encode($weight_info); 16 }
上面的代码实现的效果：
留个笔记，目前能用即可，详情的功能需要再研究
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
