软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> MysqlToCharts(四) -> 正文阅读

[Web前端]MysqlToCharts(四)


需要将数据在网页端绘制成曲线图标的形式,在网上找到了ichartjs开源图形组件
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形
下面的内容主要学习参考于ichartjs官网的相关文档和源码:
http://www.ichartjs.com/

构建项目环境


由于ichartjs是一个js库,所以只要将ichart.js加入页面中的head中就完成了ichartjs的运行环境,代码如下:
<script type="text/javascript" src="ichart.1.2.min.js"></script>

ichartjs提供的图像


面积图:
var chart = new iChart.Area2D({});

[img]http://img.blog.csdn.net/20160328153539546
2D条形图:
new iChart.Bar2D({});

[img]http://img.blog.csdn.net/20160328154125583
2D柱状图:
new iChart.Column2D({});

[img]http://img.blog.csdn.net/20160328154334365
3D柱状图:
new iChart.Column3D({});

[img]http://img.blog.csdn.net/20160328154529631
折线图:
var chart = new iChart.LineBasic2D({});

[img]http://img.blog.csdn.net/20160328154647335
2D饼图:
new iChart.Pie2D({});

[img]http://img.blog.csdn.net/20160328154755874
2D环形图:
var chart = new iChart.Donut2D({});

[img]http://img.blog.csdn.net/20160328154912329
3D饼图:
var chart = new iChart.Pie3D({});

[img]http://img.blog.csdn.net/20160328155017680
组合图:
[img]http://img.blog.csdn.net/20160328155141102
现需实现的是3个参数的曲线图,故参考ichartjs开源组件中的折线图->网站最近5天流量趋势A 中的源码
根据需求,修改后:

data模块代码

 var newBugsNumberArr=[],closedBugsNumberArr=[],remainBugsNumberArr=[];
 var data = [
        {
            name : '新增bug数',
            value:newBugsNumberArr,
            color:'#0d8ecf',
            line_width:2
        },
        {
            name : '关闭bug数',
            value:closedBugsNumberArr,
            color:'#ef7707',
            line_width:2
        },
        {
            name : '遗留bug数',
            value:remainBugsNumberArr,
            color:'#ec4646',
            line_width:2
        }
    ];

其中
name:该曲线的参数名称
value:数组,该曲线各个节点的值
color:该曲线的颜色
line_width:该曲线的宽度
曲线的画图部分的代码如下:
    var labels = weeks;
    var line = new iChart.LineBasic2D({
        render : 'canvasDiv',
        data: data,
        align:'center',
        title : '2016年' + projectName + '项目bug统计',
        footnote : '数据来源:Jira平台',
        width : 1800,
        height : 710,
        tip:{
            enable:true,
            shadow:true
        },
        legend : {
            enable : true,
            row:1,//设置在一行上显示,与column配合使用
            column : 'max',
            valign:'top',
            sign:'bar',
            background_color:null,//设置透明背景
            //offsetx:-80,//设置x轴偏移,满足位置需要
            border : true
        },
        crosshair:{
            enable:true,
            line_color:'#62bce9'
        },
        sub_option : {
            label:false,
            point_hollow : false
        },
        coordinate:{
            width:1700,
            height:600,
            axis:{
                color:'#9f9f9f',
                width:[0,0,2,2]
            },
            grids:{
                vertical:{
                    way:'share_alike',
                    value:5
                }
            },
            scale:[{
                position:'left',
                start_scale:0,
                end_scale:100,
                scale_space:10,
                scale_size:2,
                scale_color:'#9f9f9f'
            },{
                position:'bottom',
                labels:labels
            }]
        }
    });

现介绍几个常用的参数:
1. align
绘主图区在图表中的水平对齐位置。(默认为’center’)
2. background_color
组件中背景颜色(填充色)的值。(默认为’FEFEFE’)
3. color
组件中字体颜色的值。(默认为’black’)
4. coordinate
坐标系的配置项
5. crosshair
十字线的配置(默认的enable为false)
6. data
必需属性,图表的数据源
7. footnote
脚注的配置项,若给出字符串,则用默认配置进行渲染标题
8. height
图表的高度,单位px
9. width
图表的宽度,单位px
10. label
折线图x坐标轴下方的标签文本的配置项
11. labels
刻度水平轴的文本标签集合
12. legend
图例的配置项
13. point_space
折线点之间的间距,如果为Null则将坐标系有效宽度平分
14. render
图表渲染的HTML DOM的id。(默认为”)
15. shadow
此组件是否启用阴影效果。启用阴影在移动客户端上可能会引起渲染速度变慢。(默认为false)
16. title
标题的配置项,若给出字符串,则用默认配置进行渲染标题
17. subtitle
副标题的配置项,若给出字符串,则用默认配置进行渲染标题
常用的事件:
1. click
点击时触发
2. draw
完成绘图之后触发
3. mousemove
鼠标移动时触发
具体可见:
http://www.ichartjs.com/docs/zh/html/ichart_linebasic2d.html
在曲线图的绘图设定完成后,需进行绘图渲染
line.draw();

将ichartjs的画图封装成一个函数
var drawLineBasic2D = function(projectName, weeks, newBugsNumberArr, closedBugsNumberArr, remainBugsNumberArr){
                   .
                   .
                   .

}

将项目名称、刻度水平轴的文本标签数组、数据data数组做为参数传入函数中
在处理传入的数据中
var loadReport = function(projectName) {
    $.get('/NextPage/report/data',{projectName: projectName},function(data){
        if(data.statusCode === 500) {
            alert('Wrong Wrong Wrong,please check!!!');
        } else {
            var newBugsNumberArr = [],
                closedBugsNumberArr = [],
                remainBugsNumberArr = [],
                weeks = [],
                length = data.length;
            for(var i = 0; i < length; i++){
                newBugsNumberArr.push(data[i]['newBugsNumber']);
                closedBugsNumberArr.push(data[i]['closedBugsNumber']);
                remainBugsNumberArr.push(data[i]['remainBugsNumber']);
                weeks.push(data[i]['week']);
            }
            drawLineBasic2D(projectName, weeks, newBugsNumberArr, closedBugsNumberArr, remainBugsNumberArr)
        }
    });
};

其中,’/NextPage/report/data’ 在index.js文件中定义
/**
 * 请求数据库数据
 */
router.get('/NextPage/report/data', function (req, res, next) {
    jiraMysqlQuery.checkProjectBugNumber(req.param('projectName'), function(error, data) {
        if(error) {
            res.send({stateCode: 500});
        }else {
            res.send(data);
        }
    });
});

回调函数,返回变量data让function(data){} 调用
loadReport函数中的如:
closedBugsNumberArr.push(data[i][‘closedBugsNumber’] 为在Mysql To Charts(三)中读取到的数据库的数组的值
loadReport.js文件中
var loadReport = function(projectName) {};

抛出projectName的变量,给其他文件调用
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-03-28 21:39:56  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年7日历
2018-7-22 11:16:51
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --