android shape 绘制气泡图,气泡图-自定义 shape
源码复制成功复制失败全屏 复制 运行
气泡图-自定义 shape
// 自定义 shape, 支持图片形式的气泡
var Shape = G2.Shape;
Shape.registerShape('point', 'image', {
drawShape: function drawShape(cfg, container) {
cfg.points = this.parsePoints(cfg.points);
var coord = this._coord;
container.addShape('line', {
attrs: {
x1: cfg.points[0].x,
y1: cfg.points[0].y,
x2: cfg.points[0].x,
y2: coord.start.y,
stroke: '#ccc',
lineWidth: 1,
lineDash: [4, 2]
}
});
return container.addShape('image', {
attrs: {
x: cfg.points[0].x - 12 * cfg.size / 2,
y: cfg.points[0].y - 12 * cfg.size,
width: 12 * cfg.size,
height: 12 * cfg.size,
img: cfg.shape[1]
}
});
}
});
var data = [{
name: 'Internet Explorer',
value: 26
}, {
name: 'Chrome',
value: 40
}, {
name: 'Firefox',
value: 30
}, {
name: 'Safari',
value: 24
}, {
name: 'Opera',
value: 15
}, {
name: 'Undetectable',
value: 8
}];
var imageMap = {
'Internet Explorer': 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png',
'Chrome': 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png',
'Firefox': 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png',
'Safari': 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png',
'Opera': 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png',
'Undetectable': 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png'
};
var chart = new G2.Chart({
container: 'mountNode',
forceFit: true,
height: window.innerHeight,
padding: [20, 20, 90]
});
chart.source(data, {
value: {
nice: false,
max: 60,
min: 0
}
});
chart.legend(false);
chart.axis('value', false);
chart.point().position('name*value').size('value').color('name').shape('name', function(name) {
return ['image', imageMap[name]]; // 根据具体的字段指定 shape
}).label('value', {
offset: -20,
textStyle: {
fontSize: 16 // 文本大小
}
});
chart.render();
气泡图-自定义 shape
// 自定义 shape, 支持图片形式的气泡
var Shape = G2.Shape;
Shape.registerShape('point', 'image', {
drawShape: function drawShape(cfg, container) {
cfg.points = this.parsePoints(cfg.points);
var coord = this._coord;
container.addShape('line', {
attrs: {
x1: cfg.points[0].x,
y1: cfg.points[0].y,
x2: cfg.points[0].x,
y2: coord.start.y,
stroke: '#ccc',
lineWidth: 1,
lineDash: [4, 2]
}
});
return container.addShape('image', {
attrs: {
x: cfg.points[0].x - 12 * cfg.size / 2,
y: cfg.points[0].y - 12 * cfg.size,
width: 12 * cfg.size,
height: 12 * cfg.size,
img: cfg.shape[1]
}
});
}
});
var data = [{
name: 'Internet Explorer',
value: 26
}, {
name: 'Chrome',
value: 40
}, {
name: 'Firefox',
value: 30
}, {
name: 'Safari',
value: 24
}, {
name: 'Opera',
value: 15
}, {
name: 'Undetectable',
value: 8
}];
var imageMap = {
'Internet Explorer': 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png',
'Chrome': 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png',
'Firefox': 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png',
'Safari': 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png',
'Opera': 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png',
'Undetectable': 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png'
};
var chart = new G2.Chart({
container: 'mountNode',
forceFit: true,
height: window.innerHeight,
padding: [20, 20, 90]
});
chart.source(data, {
value: {
nice: false,
max: 60,
min: 0
}
});
chart.legend(false);
chart.axis('value', false);
chart.point().position('name*value').size('value').color('name').shape('name', function(name) {
return ['image', imageMap[name]]; // 根据具体的字段指定 shape
}).label('value', {
offset: -20,
textStyle: {
fontSize: 16 // 文本大小
}
});
chart.render();
android shape 绘制气泡图,气泡图-自定义 shape相关推荐
- android中shape资源定义,Android可绘制对象资源之shape和layer-list使用
Code4Android.jpg 前言 文章中内容多来自谷歌官方文档详戳,一些示例代码详戳GitHub,不喜请轻喷. 可绘制对象资源 可绘制对象资源是一般概念,是指可在屏幕上绘制的图形,以及可以使用 ...
- android canvas绘制圆角_Android自定义View撸一个渐变的温度指示器(TmepView)
秦子帅明确目标,每天进步一点点..... 作者 | andy 地址 | blog.csdn.net/Andy_l1/article/details/82910061 1.概述 自定义View对需要 ...
- android shape 自定义,Android自定义shape的使用
MainActivity如下: package cn.testshape; import android.os.Bundle; import android.app.Activity; /** * D ...
- Android绘制(一):来用shape绘出想要的图形吧!
目录 前言 shape绘制 矩形 椭圆 线 环 用shape绘制SeekBar 最后 前言 在没有UI设计师的时候, 或者是想简单看下效果的时候, 用shape进行快速绘制是极好的! 官方文档. sh ...
- Android shape 绘制左右 或者上下的渐变色
shape 绘制的渐变色使用的 gradient 默认是从左向右的方向绘制的 比如 <?xml version="1.0" encoding="utf-8" ...
- android shape 画阴影_Android使用shape绘制阴影图层阴影效果示例
最近在项目中用到一个比较有意思的阴影特效 从上面的效果图上可以发现在图片的右.下有一个阴影的特效,通过这个阴影效果明显会使得这个提示文本有一种立体的观感.瞬间高大上有木有? 基于以上UI效果,有两种最 ...
- Python、R绘制多彩气泡图
Python.R绘制多彩气泡图 在工作中面对这么一个问题,使用软件实现二维气泡图,需要在每个气泡加上标签等信息.搜了一圈,关于此类的文章较少,故写篇总结,和大家一起探讨使用. 这里从网上随便找到一个数 ...
- 使用shape绘制阴影图层阴影效果
最近在项目中用到一个比较有意思的阴影特效 从上面的效果图上可以发现在图片的右.下有一个阴影的特效,通过这个阴影效果明显会使得这个提示文本有一种立体的观感.瞬间高大上有木有? 基于以上UI效果,有两种最 ...
- R语言ggplot2可视化气泡图：无填充色的气泡图、自定义填充色的气泡图
R语言ggplot2可视化气泡图:无填充色的气泡图.自定义填充色的气泡图 目录 R语言ggpl
最新文章
- 前端面经笔记 2021.8.28
- bayer格式插值算法实现
- 大家是否也习惯将常用到的Python软件包放在一个头文件里？
- 【TUP第11期】腾讯黄朝兴：浅谈客户端架构
- python绘制饼图-Python使用Plotly绘图工具，绘制饼图
- sc169 lecture note
- Entity Framework 4 Poco开发之旅 part 2
- ubuntu pip更新_Cubietruck开发板折腾002：安装Python管理工具pip
- 使用noConclict后仍然能够在函数体内继续使用$的方法
- python 定时器_python 线程之四：定时器（Timer），非阻塞
- Emacs 安装与体验
- jQuery ajax 使用
- Win10下Linux子系统使用串口(不是USB转串口)
- DevOps 10大IT管理工具（翻译）
- 编程专业人的良好习惯（练习、时间管理、压力、团队协作）
- php在线图片签名,ElementUi+Vue+Php+fpdf+fpdi 实现文档在线签订(图片水印、手写签名)...
- java 判断日期周几_Java判断当前日期是否在周几到周几时间范围内
- 帝国cms没有标题图片就显示默认图片
- 【实战】如何在手机上实时接收微信小店订单提醒
- Linux下各压缩工具的解压压缩命令
热门文章
- java textvaluechanged 全选删除不触发_具有TextChanged事件的AutoCompleteBox未正确选择
- Android:Eclipse+ADT+Android SDK 搭建安卓开发环境
- 营销管理手册_某连锁动物医院营销管理咨询项目方案成功汇报
- PCL之平面分割模型
- Halcon 仿射变换
- 构建大型 Mobx 应用的几个建议
- Please review your Gradle project setup in the android/ folde
- HDU 2955 Robberies（概率DP，01背包）题解
- Exchange Server 2016管理系列课件03.管理邮箱配额限制
- Keepalived-在没有之前配置的Nginx高可用(不建议采纳)