ichartjs测试dome分享
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图表测试</title>
<script type="text/javascript" src="../ichart.1.2.1.min.js"></script>
<style type="text/css">
.box{
display: flex;
justify-content : space-around;
flex-direction:row;
background: #1c4156;
height: 100%;
position: fixed;
left:0;
top:0;
width: 100%;
}
.left, .center ,.right{
width:33.33vw;
display: inline-block;
vertical-align: top;
}
#canvasDiv{
margin-top: 8vh;
}
#canvasDiva2{
margin-top: 5vh;
}
</style>
<script type="text/javascript">
$(function(){
var data1 = [
{name : '吊龙',value : 27616.48,color:'#0278be'},
{name : '牛杂',value : 19454.00,color:'#0278be'},
{name : '匙仁',value : 17208.56,color:'#0278be'},
{name : '匙柄',value : 17014.00,color:'#0278be'},
{name : '秘制调料',value : 16420.00,color:'#0278be'},
{name : '嫩肉',value : 15293.80,color:'#0278be'},
{name : '五花腱',value : 14718.00,color:'#0278be'},
{name : '雪花',value : 12044.00,color:'#0278be'},
{name : '山药',value : 11714.00,color:'#0278be'},
{name : '玉米萝卜锅',value : 8040.00,color:'#0278be'}
];
var data2 = [
{name : '吊龙',value : 170,color:'#0278be'},
{name : '牛杂',value : 140,color:'#0278be'},
{name : '匙仁',value : 130,color:'#0278be'},
{name : '匙柄',value : 110,color:'#0278be'},
{name : '秘制调料',value : 90,color:'#0278be'},
{name : '嫩肉',value : 80,color:'#0278be'},
{name : '五花腱',value : 60,color:'#0278be'},
{name : '雪花',value : 55,color:'#0278be'},
{name : '山药',value : 50,color:'#0278be'},
{name : '玉米萝卜锅',value : 10,color:'#0278be'}
];
//创建数据
var data = [
{
name : 'A产品',
value:[2680,2200,1014,2590,2800,3200,2184,3456,2693,2064,2414,2044],
color:'#0278be',
line_width:2
}
];
//创建x轴标签文本
var labels = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
var chart = new iChart.Area2D({
render : 'canvasDiv',
data: data,
title:{
text:'A产品2011年度订单数据分析',
color:'#eff4f8',
height:40,
},
animation : true,
animation_duration:700,//700ms完成动画
sub_option:{
label:false,
hollow_inside:false,//设置一个点的亮色在外环的效果
point_size:10
},
tip:{
enable:true,
listeners:{
//tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
parseText:function(tip,name,value,text,i){
return labels[i]+"订单数:<span>"+value+"</span>万件";
}
}
},
width : 600,
height : 400,
background_color:'#1c4156',
shadow_color:'#1c4156',
shadow_offsetx:0,
shadow_offsety:0,
gradient_mode:'none',//设置一个从下到上的渐变背景
border:{
radius:5
},
coordinate:{
width : 400,
height : 240,
grid_color:'#506e7d',
background_color:null,//设置坐标系为透明背景
scale:[{
position:'left',
label:{
color:'#eff4f8',
fontsize:14,
},
start_scale:0,
end_scale:4000,
scale_space:500
},{
position:'bottom',
label:{
color:'#eff4f8',
},
labels:labels
}]
}
}).draw(); var canvasDiva1 = new iChart.Bar2D({
render : 'canvasDiva1',
data: data1,
title:{
text:'品牌销售额排行',
color:'#eff4f8'
},
width : 620,
height : 800,
animation : true,
animation_duration:700,//700ms完成动画
background_color:'#1c4156',
label:{
color:'#eff4f8',
},
sub_option : {
label : {
color : '#eff4f8'
},
},//数值css
coordinate:{
scale:[{
position:'bottom',
start_scale:0,
end_scale:40,
scale_space:10000,
label:{
color:'#eff4f8',
},
listeners:{
parseText:function(t,x,y){
return {text:t+"元"}
}
}
}]
}
}).draw();
var canvasDiva2 = new iChart.Column2D({
render : 'canvasDiva2',
data: data2,
title:{
text:'品牌销售额排行',
color:'#eff4f8'
},
width : 600,
height : 200,
animation : true,
animation_duration:700,//700ms完成动画
background_color:'#1c4156',
color:'#eff4f8',
label:{
color:'#eff4f8',
},
sub_option : {
label : {
color : '#eff4f8'
},
},//数值css
coordinate:{
scale:[{
position:'left',
start_scale:0,
end_scale:18,
scale_space:50,
label:{
color:'#eff4f8',
},
listeners:{
parseText:function(t,x,y){
return {text:t+"件"}
}
}
}]
}
}).draw();
});
</script>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center">
<div id='canvasDiva1'></div>
</div>
<div class="right">
<div id='canvasDiva2'></div>
<div id='canvasDiv'></div>
</div>
</div> </body>
</html>
ichartjs测试dome分享的更多相关文章
- [测试技术分享]easyFuzzer使用案例分享
easyFuzzer使用案例分享 1.简介: easyFuzzer是wooyun的一位白帽子(光刃)提供的一款用于fuzz文件的工具.平时主要是和网络协议安全打交道,和本地软件安全打交道比较少,所以没 ...
- 知名渗透测试利器分享 - Appscan下载
安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的" ...
- 基于Dubbo的http自动测试工具分享
公司是采用微服务来做模块化的,各个模块之间采用dubbo通信.好处就不用提了,省略了之前模块间复杂的http访问.不过也遇到一些问题: PS: Github的代码示例还在整理中... 测试需要配合写消 ...
- 件测试专家分享III GUI自动化测试相关
GUI自动化:效率为王—脚本与数据解偶 页面对象模型的核心理念是,以页面(Web Page或者Native App Page)为单位来封装页面上的空间以及控件部分操作. 而测试用力,更确切的说是操作函 ...
- 我在Xcode 6上Swift框架的测试经验分享
我耗费了两个多月时间来琢磨Swift作为一门函数是编程语言都能做些什么,而今已经转移 到使用Swift来开发库文件了. 我花了一天的时间,最后发觉之前做的Swift特性探究是相当愉快的经历,我发现仍旧 ...
- [测试技术分享]DNS域传送漏洞测试
DNS域传送漏洞测试 1.简介: DNS(Domain Name System)也叫域名管理系统,它它建立在一个分布式数据库基础之上,在这个数据库里,保存了IP地址和域名的相互映射关系.正因为DNS的 ...
- App测试经验分享之登录注册
要诀 另外自己总结了一些要诀,仅供参考: 1)快:快速操作,营造冲突的场景,例如加载过程中返回键交互,快速点击登录按钮,快速切换菜单项,快速多次上下拉刷新 2)变:手机横竖屏.手机切换语言.手机调整字 ...
- 【测试技术分享】在Linux下安装Python3
导语:Python在linux环境下没有安装包,同时很多系统没有Python环境,即使有Python环境也是Python2.x,顺应时代,现在开始进行安装Python3的教程. 一.安装依赖 sudo ...
- Go测试技术分享（一）:场景化接口Case编写
一.前言 本人负责的支付清结算方向的测试工作,在测试项目中,会出现流程化的接口调用,请求完一个接口后,继续请求另一个接口(这里的接口可以指Http,也指rpc接口),这里以一个真实场景为例:用户在平台 ...
随机推荐
- Python高级语法-多继承MRO相关-args和kwargs（4.5.2）
@ 目录 1.说明 2.代码 关于作者 1.说明 args数据类型为元组 kwargs数据类型为字典 一般传入方法中使用遍历去得到值 这个传入参数的顺序没有特殊的要求 当你自定义的参数传完以后,写了名 ...
- 面试官问我:Object o = new Object() 占用了多少个字节？
小小面试一下 前言蜜语 最近马师傅火的不要不要的,虽然没有抢到耗子尾汁的商标注册权,但是必须得蹭一波马师傅的热度,下面就是闪电五连鞭的教学环节,你准备好了吗! 在正式内容开始前先甩两篇关于类加载机制和 ...
- MyBatis史上最全文章
老规矩,本篇文章 不做 MyBatis 的 编码讲解 ,只介绍 文章学习的一些优秀文章 重点在于不要循规蹈矩,教程 这样走,你不一定要按他这样走,按自己的方式来,学习效率会更高,网上的教程有很多,今天 ...
- Python进阶——什么是描述符？
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 在 Python 开发中,你可能听说过「描述符」这个概念,由于我们很少直接使用它,所以大部分开发人员 ...
- Winform程序及dll打包成一个可执行的exe
使用场景 通常开发的Winform程序,引用了其他类库后,在输出目录下都会产生很多DLL文件,exe执行时必须依赖这些DLL.想要Winform程序只有一个可执行exe文件,又不想打包成安装包,就可以 ...
- 浅析Python闭包
1.什么是闭包 在介绍闭包概念前,我们先来看一段简短的代码 def sum_calc(*args): def wrapper(): sum = 0 for n in args: sum += n; r ...
- 微信小程序--关于加快小程序开发的几个小建议
加快小程序开发的几个小建议 1.使用 app.json创建页面 按照我们平常的开发习惯,创建一个新的页面,一般都会先创建文件夹,再创建对应page的形式,创建完成后,app.json中会自动注册该 ...
- 其实吧，LRU也就那么回事。
这是why哥的第 81 篇原创文章 你面试的时候遇见过LRU吗? LRU 算法,全称是Least Recently Used. 翻译过来就是最近最少使用算法. 这个算法的思想就是:如果一个数据在最近一 ...
- 大白话Java多线程，小白都能看的懂的哦
什么是线程 说到线程我们应该先了解下什么是进程,下面这个图片大家应该都比较熟悉吧. 我们看到的这些单独运行的程序就是一个独立的进程,进程之间是相互独立存在的.我们上面图中的360浏览器.百度云盘等等都 ...
- 在ubuntu上利用科大讯飞的SDK实现语音识别-语义识别等功能
首先,参考科大讯飞的官方sdk中的案例,实现和机器的日常对话和控制. 具体步骤: 1. 通过麦克风捕获说话的声音,然后通过在线语音识别获取语音中的字符. 2. 将获取到的字符上传到科大讯飞的语义识别中 ...