JS 画饼图,折线图

网址:

  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         }

上面的代码实现的效果:

  

留个笔记,目前能用即可,详情的功能需要再研究

时间: 2024-08-18 11:30:39

JS 画饼图,折线图的相关文章

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

使用C#画图(饼图折线图)

public PlaceHolder PlaceHolder1; //显示图像的控件 各个图像的类别名称如下: PictureType    图形种类    5    chChartTypeBarClustered    簇状条形图    0    NULL PictureType    图形种类    7    chChartTypeBarClustered3D    三维簇状条形图    0    NULL PictureType    图形种类    6    chChartTypeBar

canvas+js画饼状图

效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>饼状图</title> </head> <body> <canvas id="canvas"></canvas> <script> (function () {

超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

效果预览 实例代码 <div class="htmleaf-container"> <div class="htmleaf-content"> <div style="width:30%;margin:0 auto;"> <div> <canvas id="canvas" height="450" width="600"><

原生js实现折线图

不借助Echarts等图形框架原生JS快速实现折线图效果 1. 折线图效果预览 例如下图所示的折线图效果实现就很简单: 调用下面这段JS代码中的方法就好了: 假设页面上需要连接的所有点元素集合是eleDots,则页面上执行下fnLineChart(eleDots)效果就出来了. 当然,这段JS只处理长度和角度这两个动态属性,其他固定的样式还需要CSS配合,例如,线条的粗细和线条颜色,例如下面这个粗细2像素的绿色折线,可以这样: 2. 斜线效果实现的原理 1)计算两点之间的直线长度 这个应该属于初

python中matplotlib画折线图实例(坐标轴数字、字符串混搭及标题中文显示)

最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指正. 一.最简单的基本框架如下:已知x,y,画出折线图并保存.此时x和y均为数字. 1 # -*- coding: utf-8 -*- 2 3 import matplotlib.pyplot as plt #引入matplotlib的pyplot子库,用于画简单的2D图 4 import random 5

swift:打造你自己的折线图

看到苹果Health里的折线图了吗.我们就是要打造一个这样的折线图.没看过的请看下图. 我们的主题在于折线图本身.其他的包括步数.日平均值等描述类的内容这里就不涉及了. 首先观察,这个图种包含些什么组成部分.线?这个太明显都看见了.还有每个节点的小圆圈,还有折线图里从上到下的渐变.这里是白色的从上到下逐渐透明的效果.还有一条虚线.这个暂时先不考虑了.你能绘制出来最下面的x轴标尺,绘制个虚线还不是小菜? 为什么说是绘制呢,因为显然我们不想用一个UIView把像素设置为1,背景色设置为UIColor

python matplotlib 折线图的制作

python  matplotlib和random 折线图的制作 1.库的导入 import matplotlib.pyplot as plt # 导入模块 import random 2.创建画布并设置中文 # 1)创建画布(容器层) plt.figure("北京上海温度", figsize=(10, 5)) # 10为绘图对象长度,5为宽度 plt.rcParams['font.sans-serif'] = ['SimHei'] # 用来正常显示中文标签 plt.rcParams[

Android画折线图、柱状图、饼图(使用achartengine.jar)

自从用了画折线的jar包之后,就不想再用canvas画布去画了,编程就是要站在巨人的肩膀上. 所需要的jar包achartenginejar 折线代码布局文件就不上传了很简单 另一种线的渲染器 扇形图代码 柱状图代码 属性总结部分代码 新测试代码下载地址 所需要的jar包:achartengine.jar 下载地址:http://download.csdn.net/detail/zhengyikuangge/9460642 折线代码(布局文件就不上传了,很简单): package com.exa