當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS 画饼图，折线图
生活随笔
收集整理的這篇文章主要介紹了
JS 画饼图，折线图
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
網(wǎng)址：
http://www.hcharts.cn/demo/index.php
效果圖：
它的網(wǎng)址里面都很全的。簡(jiǎn)單實(shí)用扣代碼即可
使用時(shí)注意數(shù)據(jù)格式即可
1 //獲取mood_evalue的百分比 2 $total_mood_evalue = 0; 3 //初始化key的數(shù)組，統(tǒng)計(jì)key的百分比 4 $mood_key_arr = array(); 5 6 //1-5分別對(duì)應(yīng)值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來格式化數(shù)據(jù)
補(bǔ)充：
Highcharts ?跟 ?Highstock ?效果不一樣。使用方法大體一致
自己簡(jiǎn)單總結(jié)的，不一定對(duì)
1 chart 2 type : 'line' 曲線圖, 3 'area' 區(qū)域圖, 4 'areaspline' 曲線區(qū)域圖 5 'arearange' 區(qū)域范圍圖 6 'column' 柱形圖 7 'bar' 條形圖 8 'pie' 餅圖，餅圖跟其他的不一樣，不僅僅指定type。 9 inverted: 是否反轉(zhuǎn)x，y軸；(true,false) 10 11 title 12 text : '主標(biāo)題文字' 13 x:文字定位x, 14 y:文字定位y軸, 15 16 subtitle 17 text : '副標(biāo)題文字' 18 x:文字定位x, 19 y:文字定位y軸, 20 21 legend（對(duì)說明的配置，即藍(lán)色線圖代表的文字意義之類的） 22 layout : 'vertical' 表示垂直放置，不設(shè)置即水平的 23 align : 水平位置 24 verticalAlign: 垂直位置 25 x: 定位x 26 y: 定位y 27 floating: 是否浮動(dòng)，true表示真，false表示不浮動(dòng) 28 borderWidth: 邊框?qū)挾?#xff0c;數(shù)字 29 backgroundColor: 背景色 30 31 xAxis 32 title { 33 text: 'x軸說明文字' 34 }, 35 min 如果是數(shù)值，那么最小值 36 max 如果是數(shù)值，那么最大值 37 categories 自定義x軸值，是個(gè)數(shù)組 38 39 yAxis (y軸的數(shù)據(jù)，是根據(jù)series下的data來自動(dòng)填充的，如果需要格式化顯示，labels--formatter) 40 title { 41 text: 'y軸說明文字' 42 }, 43 plotLines [//y軸自定義繪制線條，每個(gè)值都是一個(gè)對(duì)象 44 { 45 value 對(duì)應(yīng)y軸數(shù)據(jù)，即定義線條的位置 46 width 線條寬度 47 color 顏色 48 } 49 ], 50 labels:{ 51 formatter:function() {//格式化顯示數(shù)據(jù),除了value變量外，還有axis(對(duì)象)、chart（對(duì)象）、isFirst（boolean）、isLast（boolean）可用 52 return this.value + 跟對(duì)應(yīng)的操作，this.value 對(duì)應(yīng)個(gè)就是y軸的值 53 }, 54 enabled: true表示展示該軸，false表示不展示 55 step:顯示間隔，假如數(shù)值為1，2，3，4，5 ，設(shè)置為2只展示1，3，5 56 staggerLines:水平軸Lables顯示行數(shù)。（該屬性只對(duì)水平軸有效）當(dāng)Lables內(nèi)容過多時(shí)，可以通過該屬性控制顯示的行數(shù)。和該屬性相關(guān)的還有maxStaggerLines屬性。 57 } 58 59 60 61 tooltip:（對(duì)提示的配置，即鼠標(biāo)懸浮時(shí)的提示） 62 crosshairs: 曲線圖，顯示豎條 （true,false） 63 valueSuffix: 添加后綴標(biāo)識(shí)符 64 shared: true 展示對(duì)應(yīng)列所有的數(shù)據(jù)，false 單單展示鼠標(biāo)放置點(diǎn)的數(shù)據(jù) 65 66 headerFormat: 指定html文檔的開始 67 pointFormat: 指定html中間信息 68 footerFormat: 指定html格式的結(jié)尾 69 userHTML: 是否開啟html格式解析 70 71 series:值是個(gè)數(shù)組,數(shù)組里面一個(gè)值是個(gè)對(duì)象 72 [ 73 { 74 name: '', 數(shù)據(jù)的展示名稱 75 data: [], 數(shù)據(jù)的值//null 表示沒有，0表示0，不一樣 76 }, 77 {} 78 ]在項(xiàng)目中使用（備）：
1 $.extend({ 2 table_png : function(res) {//曲線圖圖通用 3 Highcharts.setOptions({ 4 global: { 5 useUTC: false //關(guān)閉文件默認(rèn)時(shí)區(qū)，采用數(shù)據(jù)時(shí)間顯示 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: '一個(gè)月' 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', //隔區(qū)變色 88 opposite: true, //y軸位置 left right 89 offset: 50, //y軸與數(shù)據(jù)區(qū)位置 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數(shù)據(jù)標(biāo)尺*/ 105 crosshairs: { 106 dashStyle: 'dash', 107 /*數(shù)據(jù) 標(biāo)尺線樣式*/ 108 color: 'red', 109 } 110 }, 111 /*下部時(shí)間拖拉選擇*/ 112 navigator: { 113 enabled: true, 114 /*關(guān)閉時(shí)間選擇*/ 115 baseseries: 10 116 }, 117 /*數(shù)據(jù)點(diǎn)設(shè)置*/ 118 plotOptions: { 119 series: { 120 marker: { 121 enabled: true, 122 /*數(shù)據(jù)點(diǎn)是否顯示*/ 123 radius: 2, 124 /*數(shù)據(jù)點(diǎn)大小px*/ 125 fillColor:'#000' /*數(shù)據(jù)點(diǎn)顏色*/ 126 }, 127 dataLabels: { 128 enabled: false, 129 /*在數(shù)據(jù)點(diǎn)上顯示數(shù)值*/ 130 format: '{y}' 131 },
lineWidth: 1,//線條寬度
dataGrouping: {
forced:true,//X軸顯示數(shù)據(jù)正常
}
if(typeof now == 'object'){
var time_obj = new Date();
time_obj.setFullYear(parseInt(now.year),(parseInt(now.month) - 1),parseInt(now.day));
time_obj.setHours(parseInt(now.hour),parseInt(now.minute),parseInt(now.second));
return time_obj.getTime();
}else if(typeof now == 'string')
return new Date(now).getTime();
調(diào)用：
//直接寫在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('加載數(shù)據(jù)中...'); 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('沒有找到任何數(shù)據(jù)'); 32 } 33 } 34 }); 35 }); 36 37 </script>
服務(wù)器端：
1 //ajax用戶體重圖表數(shù)據(jù) 2 public function ajaxWeight() { 3 $user_id = I('get.user_id',0); 4 5 //檢查權(quán)限 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:服務(wù)器查詢用戶體重信息失敗'); 14 15 echo json_encode($weight_info); 16 }上面的代碼實(shí)現(xiàn)的效果：
留個(gè)筆記，目前能用即可，詳情的功能需要再研究
轉(zhuǎn)載于:https://www.cnblogs.com/lxdd/p/4344919.html
總結(jié)
以上是生活随笔為你收集整理的JS 画饼图，折线图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 反射封装工具类-----零SQL插入
- 下一篇： 多兼容的JS获取鼠标坐标