網(wǎng)址：

　　http://www.hcharts.cn/demo/index.php

效果圖：

　　它的網(wǎng)址里面都很全的。簡單實用扣代碼即可

　　

使用時注意數(shù)據(jù)格式即可

1 　　　　　　　　//獲取mood_evalue的百分比 2 $total_mood_evalue = 0; 3 //初始化key的數(shù)組，統(tǒng)計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來格式化數(shù)據(jù)

補充：

　　Highcharts ?跟 ?Highstock ?效果不一樣。使用方法大體一致

自己簡單總結的，不一定對

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 : '主標題文字' 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: 邊框?qū)挾?#xff0c;數(shù)字 29 backgroundColor: 背景色 30 31 xAxis 32 title { 33 text: 'x軸說明文字' 34 }, 35 min 如果是數(shù)值，那么最小值 36 max 如果是數(shù)值，那么最大值 37 categories 自定義x軸值，是個數(shù)組 38 39 yAxis (y軸的數(shù)據(jù)，是根據(jù)series下的data來自動填充的，如果需要格式化顯示，labels--formatter) 40 title { 41 text: 'y軸說明文字' 42 }, 43 plotLines [//y軸自定義繪制線條，每個值都是一個對象 44 { 45 value 對應y軸數(shù)據(jù)，即定義線條的位置 46 width 線條寬度 47 color 顏色 48 } 49 ], 50 labels:{ 51 formatter:function() {//格式化顯示數(shù)據(jù),除了value變量外，還有axis(對象)、chart（對象）、isFirst（boolean）、isLast（boolean）可用 52 return this.value + 跟對應的操作，this.value 對應個就是y軸的值 53 }, 54 enabled: true表示展示該軸，false表示不展示 55 step:顯示間隔，假如數(shù)值為1，2，3，4，5 ，設置為2只展示1，3，5 56 staggerLines:水平軸Lables顯示行數(shù)。（該屬性只對水平軸有效）當Lables內(nèi)容過多時，可以通過該屬性控制顯示的行數(shù)。和該屬性相關的還有maxStaggerLines屬性。 57 } 58 59 60 61 tooltip:（對提示的配置，即鼠標懸浮時的提示） 62 crosshairs: 曲線圖，顯示豎條 （true,false） 63 valueSuffix: 添加后綴標識符 64 shared: true 展示對應列所有的數(shù)據(jù)，false 單單展示鼠標放置點的數(shù)據(jù) 65 66 headerFormat: 指定html文檔的開始 67 pointFormat: 指定html中間信息 68 footerFormat: 指定html格式的結尾 69 userHTML: 是否開啟html格式解析 70 71 series:值是個數(shù)組,數(shù)組里面一個值是個對象 72 [ 73 { 74 name: '', 數(shù)據(jù)的展示名稱 75 data: [], 數(shù)據(jù)的值//null 表示沒有，0表示0，不一樣 76 }, 77 {} 78 ]

在項目中使用（備）：

　　　　

1 $.extend({ 2 table_png : function(res) {//曲線圖圖通用 3 Highcharts.setOptions({ 4 global: { 5 useUTC: false //關閉文件默認時區(qū)，采用數(shù)據(jù)時間顯示 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', //隔區(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ù)標尺*/ 105 crosshairs: { 106 dashStyle: 'dash', 107 /*數(shù)據(jù) 標尺線樣式*/ 108 color: 'red', 109 } 110 }, 111 /*下部時間拖拉選擇*/ 112 navigator: { 113 enabled: true, 114 /*關閉時間選擇*/ 115 baseseries: 10 116 }, 117 /*數(shù)據(jù)點設置*/ 118 plotOptions: { 119 series: { 120 marker: { 121 enabled: true, 122 /*數(shù)據(jù)點是否顯示*/ 123 radius: 2, 124 /*數(shù)據(jù)點大小px*/ 125 fillColor:'#000' /*數(shù)據(jù)點顏色*/ 126 }, 127 dataLabels: { 128 enabled: false, 129 /*在數(shù)據(jù)點上顯示數(shù)值*/ 130 format: '{y}' 131 },

lineWidth: 1,//線條寬度
dataGrouping: {
forced:true,//X軸顯示數(shù)據(jù)正常
}

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

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();

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 });

調(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>

服務器端：

1 //ajax用戶體重圖表數(shù)據(jù) 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 }

上面的代碼實現(xiàn)的效果：

　　

留個筆記，目前能用即可，詳情的功能需要再研究

轉(zhuǎn)載于:https://www.cnblogs.com/lxdd/p/4344919.html

總結

以上是生活随笔為你收集整理的JS 画饼图，折线图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。