ucharts 柱状图圆角_圆角柱状图
源码复制成功复制失败全屏 复制 运行
圆角柱状图
// 自定义 shape, 支持图片形式的气泡
G2.Shape.registerShape('interval', 'borderRadius', {
draw: function draw(cfg, container) {
var points = cfg.points;
var path = [];
path.push(['M', points[0].x, points[0].y]);
path.push(['L', points[1].x, points[1].y]);
path.push(['L', points[2].x, points[2].y]);
path.push(['L', points[3].x, points[3].y]);
path.push('Z');
path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
return container.addShape('rect', {
attrs: {
x: path[1][1], // 矩形起始点为左上角
y: path[1][2],
width: path[2][1] - path[1][1],
height: path[0][2] - path[1][2],
fill: cfg.color,
radius: (path[2][1] - path[1][1]) / 2
}
});
}
});
var activeData = [{
date: '2017年3月2日',
actual: 175,
expected: 900
}, {
date: '2017年3月3日',
actual: 137,
expected: 900
}, {
date: '2017年3月4日',
actual: 240,
expected: 900
}, {
date: '2017年3月5日',
actual: 726,
expected: 900
}, {
date: '2017年3月6日',
actual: 968,
expected: 900
}, {
date: '2017年3月7日',
actual: 702,
expected: 900
}, {
date: '2017年3月8日',
actual: 655,
expected: 900
}, {
date: '2017年3月9日',
actual: 463,
expected: 900
}, {
date: '2017年3月10日',
actual: 464,
expected: 900
}, {
date: '2017年3月12日',
actual: 0,
expected: 900
}, {
date: '2017年3月13日',
actual: 638,
expected: 900
}, {
date: '2017年3月14日',
actual: 0,
expected: 900
}, {
date: '2017年3月15日',
actual: 0,
expected: 900
}, {
date: '2017年3月16日',
actual: 509,
expected: 900
}, {
date: '2017年3月17日',
actual: 269,
expected: 900
}, {
date: '2017年3月18日',
actual: 321,
expected: 900
}, {
date: '2017年3月19日',
actual: 0,
expected: 900
}, {
date: '2017年3月20日',
actual: 399,
expected: 900
}, {
date: '2017年3月21日',
actual: 662,
expected: 900
}, {
date: '2017年3月22日',
actual: 689,
expected: 900
}, {
date: '2017年3月23日',
actual: 347,
expected: 900
}, {
date: '2017年3月24日',
actual: 0,
expected: 900
}, {
date: '2017年3月26日',
actual: 428,
expected: 900
}, {
date: '2017年3月27日',
actual: 749,
expected: 900
}, {
date: '2017年3月28日',
actual: 0,
expected: 900
}, {
date: '2017年3月29日',
actual: 0,
expected: 900
}, {
date: '2017年3月30日',
actual: 69.1,
expected: 900
}];
var chart = new G2.Chart({
container: 'mountNode',
forceFit: true,
height: window.innerHeight,
padding: [150, 80]
});
chart.source(activeData, {
expected: {
ticks: [0, 900, 1200]
}
});
chart.axis('date', false);
chart.axis('actual', false);
chart.axis('expected', {
line: null,
tickLine: null,
position: 'right',
label: {
formatter: function formatter(val) {
if (val === '1200') {
return '';
}
return val;
}
}
});
chart.legend(false);
chart.interval().position('date*expected').color('#752136').shape('borderRadius').tooltip('expected').opacity(0.6);
chart.interval().position('date*actual').color('#db0d2d').tooltip('actual').shape('date*actual', function(date, val) {
if (val === 0) {
return;
} else {
return 'borderRadius';
}
});
chart.guide().text({
position: ['min', 'max'],
content: '活动',
style: {
fill: '#ff2c55',
fontSize: 20,
fontWeight: 'bold',
textBaseline: 'top'
}
});
chart.guide().text({
position: ['max', 'max'],
content: '67 / 900 千卡',
style: {
fill: '#cbcbcb',
fontSize: 20,
textAlign: 'end',
textBaseline: 'top'
}
});
chart.render();
圆角柱状图
// 自定义 shape, 支持图片形式的气泡
G2.Shape.registerShape('interval', 'borderRadius', {
draw: function draw(cfg, container) {
var points = cfg.points;
var path = [];
path.push(['M', points[0].x, points[0].y]);
path.push(['L', points[1].x, points[1].y]);
path.push(['L', points[2].x, points[2].y]);
path.push(['L', points[3].x, points[3].y]);
path.push('Z');
path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
return container.addShape('rect', {
attrs: {
x: path[1][1], // 矩形起始点为左上角
y: path[1][2],
width: path[2][1] - path[1][1],
height: path[0][2] - path[1][2],
fill: cfg.color,
radius: (path[2][1] - path[1][1]) / 2
}
});
}
});
var activeData = [{
date: '2017年3月2日',
actual: 175,
expected: 900
}, {
date: '2017年3月3日',
actual: 137,
expected: 900
}, {
date: '2017年3月4日',
actual: 240,
expected: 900
}, {
date: '2017年3月5日',
actual: 726,
expected: 900
}, {
date: '2017年3月6日',
actual: 968,
expected: 900
}, {
date: '2017年3月7日',
actual: 702,
expected: 900
}, {
date: '2017年3月8日',
actual: 655,
expected: 900
}, {
date: '2017年3月9日',
actual: 463,
expected: 900
}, {
date: '2017年3月10日',
actual: 464,
expected: 900
}, {
date: '2017年3月12日',
actual: 0,
expected: 900
}, {
date: '2017年3月13日',
actual: 638,
expected: 900
}, {
date: '2017年3月14日',
actual: 0,
expected: 900
}, {
date: '2017年3月15日',
actual: 0,
expected: 900
}, {
date: '2017年3月16日',
actual: 509,
expected: 900
}, {
date: '2017年3月17日',
actual: 269,
expected: 900
}, {
date: '2017年3月18日',
actual: 321,
expected: 900
}, {
date: '2017年3月19日',
actual: 0,
expected: 900
}, {
date: '2017年3月20日',
actual: 399,
expected: 900
}, {
date: '2017年3月21日',
actual: 662,
expected: 900
}, {
date: '2017年3月22日',
actual: 689,
expected: 900
}, {
date: '2017年3月23日',
actual: 347,
expected: 900
}, {
date: '2017年3月24日',
actual: 0,
expected: 900
}, {
date: '2017年3月26日',
actual: 428,
expected: 900
}, {
date: '2017年3月27日',
actual: 749,
expected: 900
}, {
date: '2017年3月28日',
actual: 0,
expected: 900
}, {
date: '2017年3月29日',
actual: 0,
expected: 900
}, {
date: '2017年3月30日',
actual: 69.1,
expected: 900
}];
var chart = new G2.Chart({
container: 'mountNode',
forceFit: true,
height: window.innerHeight,
padding: [150, 80]
});
chart.source(activeData, {
expected: {
ticks: [0, 900, 1200]
}
});
chart.axis('date', false);
chart.axis('actual', false);
chart.axis('expected', {
line: null,
tickLine: null,
position: 'right',
label: {
formatter: function formatter(val) {
if (val === '1200') {
return '';
}
return val;
}
}
});
chart.legend(false);
chart.interval().position('date*expected').color('#752136').shape('borderRadius').tooltip('expected').opacity(0.6);
chart.interval().position('date*actual').color('#db0d2d').tooltip('actual').shape('date*actual', function(date, val) {
if (val === 0) {
return;
} else {
return 'borderRadius';
}
});
chart.guide().text({
position: ['min', 'max'],
content: '活动',
style: {
fill: '#ff2c55',
fontSize: 20,
fontWeight: 'bold',
textBaseline: 'top'
}
});
chart.guide().text({
position: ['max', 'max'],
content: '67 / 900 千卡',
style: {
fill: '#cbcbcb',
fontSize: 20,
textAlign: 'end',
textBaseline: 'top'
}
});
chart.render();
ucharts 柱状图圆角_圆角柱状图相关推荐
- php边框圆角,css3圆角和圆角边框使用方法总结
在CSS3出现之前,想要实现圆角的效果可以通过图片或者用margin属性实现,传统的圆角生成方案,需要多张图片作为背景图案.CSS3出现以后,就不需要浪费时间去制作多张图片了,大大的减少了工作量,提高 ...
- 小程序 uni canvas绘制圆角图片 圆角矩形
小程序 uni canvas绘制圆角图片 圆角矩形 获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
- #18 可视化基础4-簇形柱状图、百分比堆积柱状图、并列子图
目录 簇形柱状图 「不指定x轴和y轴数据」 plot.bar() 「不指定x轴和y轴数据」 plot.bar("指定为x轴的columns",["指定为y轴的column ...
- PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理
PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理 以上是效果 方法如下: 1:用photoshop打开原图,并取消背景锁. 2:选"工具栏"的"圆角矩形 ...
- 【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录 一.盒子模型圆角边框 二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例 一.盒子模型圆角边框 在 CS ...
- 用Java制作左右横向柱状图_横向柱状图
Echarts绘制横向柱状图(圆角+渐变) var myChart = echarts.init(document.getElementById('main'));//初始化数据 var catego ...
- java 柱状图下载_(JFreeChart)Java图表制作
(JFreeChart)Java图表制作软件时一个灵活的设计,很容易扩展,和目标服务器端和客户端应用程序;,支持多种图表类型. 输出类型也是多样化.包括Swing组件.图像文件(包括PNG和JPEG) ...
- python 柱状图 保存_我如何从数据库中存储直方图数据？
下面的解决方案假设您有MySQL.Python和GNUPlot.如有必要,可对具体细节进行微调.发布它,以便它可以作为其他同行的基准.在 第1步:确定图形类型. 如果它是某种频率图,那么一个简单的SQ ...
- 安卓9全局圆角_三星S9+升级最新系统ONE UI体验，安卓9.0带来哪些惊喜？
戳上面的蓝字关注我们哦! 大家好!我是小马哥! 精致有趣的科技数码体验与测评 尽在"来回科技" 有锁机全面科普 科普丨什么是有锁机/卡贴机 信号测试丨有锁机vs无锁机 全新来回商城 ...
最新文章
- 线程池的介绍及简单实现
- Linux插件shellinabox结合翻译插件使用(以Chrome为例)
- ip pim spare 源树 和 共享树_Pim通用规则+Dense模式规则+Sparse模式规则
- uploadhandler.php,多个WordPress主题’upload-handler.php’任意文件上传漏洞
- 论文浅尝 | HEAD-QA: 一个面向复杂推理的医疗保健数据集
- 语言怎么绘画人物肖像_绘画丨毛焰 Mao Yan 作品
- 计算机组成原理期末无选择题,计算机组成原理期末考试习题及答案精编（70页）-原创力文档...
- 花书《深度学习》代码实现：01 线性代数：基本概念+代码实现基本运算
- 上计算机课没有签到肿么办,钉钉教学直播如何课前签到 钉钉直播如何提醒未签到的学生...
- CPU占用100%的一般原因及解决办法
- Word文献右上角标注以及自动更新——以Word2016为例
- Excel VBA:设置行高与列宽
- 市场调研报告-全球与中国液压站市场现状及未来发展趋势
- 关于以太坊ERC-20通证智能合约协议
- html中怎么引用jquery
- 阿里云-SchedulerX分布式调度中心
- 开车和做股票有什么相似之处？
- #世界上最早的个人计算机LINC的发明者——威斯利克里克
- 最新WordPress漏洞，黑客可轻松控制您的网站
- 知识付费项目怎么做？具体操作方法详解！