Comments (5)
宽高保持比例其实在具体的项目中不常见,一般都是保持高度,根据窗口大小自适应宽度。
有两种方案:
方案一:
var chart = new G2.Chart({
id: 'mountNode', // 指定图表容器 ID
height : 300, // 指定图表高度
forceFit: true,
});
方案二:
自己监听resize事件,调用chart.changeSize(width,height)
from g2.
我也遇到同样问题
from g2.
我找到了解决方法,已经解决了Bootstrap响应式自适应宽度的方法,加入resize事件
from g2.
bootstrap响应式,多个tab下,监听了resize事件。
- tab1下的图表forcefit为true,正常自适应没问题。
- 重点就是之后的tab2/3/4,如果forcefit为true,那么tab2/3/4不显示,如果forcefit为false,就不是自适应了,要自定义宽度。
- 查找了很长时间原因,目前Issues比较少,暂未解决。
`
人口属性标签
<ul class="nav nav-tabs nav-justified" id="menu">
<li class="active">
<a href="#tab1" data-toggle="tab"> 年龄标签 </a>
</li>
<li>
<a href="#tab2" data-toggle="tab"> 性别标签 </a>
</li>
</ul>
<!--人口属性画像-->
<div class="tab-content">
<!--人口属性Tab1-->
<div class="tab-pane fade active in" id="tab1">
<div id="c1" class="chart" style="height: 525px;"> </div>
<title>G2饼图</title>
<link rel="stylesheet" type="text/css" href="https://as.alipayobjects.com/g/datavis/g2-static/0.0.12/doc.css" />
<!--如果不需要jquery ajax 则可以不引入-->
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://a.alipayobjects.com/alipay-request/3.0.3/index.js"></script>
<script src="../admin/jquery.tabify.js"></script>
<script src="../admin/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入 G2 脚本 --><script src="https://as.alipayobjects.com/g/datavis/g2/1.2.6/index.js"></script>
<!-- G2 code start -->
<script type="text/javascript">
x=0;
$(document).ready(function(){
$(window).resize(function() {
});
});
</script>
<script>
var data = [
{name: '60前', value: 10},
{name: '60后', value: 20},
{name: '70后', value: 10},
{name: '80后', value: 15},
{name: '85后', value: 35},
{name: '95后', value: 5},
{name: '00后', value: 5}
];
var Stat = G2.Stat;
var chart = new G2.Chart({
id: 'c1',
width: 1000,
height: 500,
forceFit : true
});
chart.source(data);
// 重要:绘制饼图时,必须声明 theta 坐标系
chart.coord('theta', {
radius: 0.8 // 设置饼图的大小
});
chart.legend('bottom');
chart.intervalStack()
.position(Stat.summary.percent('value'))
.color('name')
.label('name*..percent',function(name, percent){
percent = (percent * 100).toFixed(2) + '%';
return name + ' ' + percent;
});
chart.render();
// 设置默认选中
var geom = chart.getGeoms()[0]; // 获取所有的图形
var items = geom.getData(); // 获取图形对应的数据
geom.setSelected(items[1]); // 设置选中
</script>
<!-- G2 code end -->
</div>
<!--人口属性Tab1-->
<!--人口属性Tab2-->
<div class="tab-pane fade" id="tab2">
<div id="c11" class="chart" style="height: 525px;"> </div>
<title>G2饼图</title>
<link rel="stylesheet" type="text/css" href="https://as.alipayobjects.com/g/datavis/g2-static/0.0.12/doc.css" />
<!--如果不需要jquery ajax 则可以不引入-->
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://a.alipayobjects.com/alipay-request/3.0.3/index.js"></script>
<!-- 引入 G2 脚本 --><script src="https://as.alipayobjects.com/g/datavis/g2/1.2.6/index.js"></script>
<!-- G2 code start -->
<script type="text/javascript">
x=0;
$(document).ready(function(){
$(window).resize(function() {
});
});
</script>
<script>
var data = [
{name: '男', value: 67},
{name: '女', value: 33}
];
var Stat = G2.Stat;
var chart = new G2.Chart({
id: 'c11',
width: 600,
height: 500,
forceFit : false
});
chart.source(data);
// 重要:绘制饼图时,必须声明 theta 坐标系
chart.coord('theta', {
radius: 0.8 // 设置饼图的大小
});
chart.legend('bottom');
chart.intervalStack()
.position(Stat.summary.percent('value'))
.color('name')
.label('name*..percent',function(name, percent){
percent = (percent * 100).toFixed(2) + '%';
return name + ' ' + percent;
});
chart.repaint();
chart.render();
// 设置默认选中
var geom = chart.getGeoms()[0]; // 获取所有的图形
var items = geom.getData(); // 获取图形对应的数据
geom.setSelected(items[1]); // 设置选中
</script>
<!-- G2 code end -->
</div>
<!--人口属性Tab2-->
</div>
</div>
</div>
</div>`
from g2.
tab设置forceFit出问题的原因在于:
- 图表在窗口宽度发生改变时,通过计算父容器的宽度来设置自己的宽度,由于tab的内图表的如容器是隐藏的所以无法计算合适的宽度
所以你使用tab的时候如果要自适应宽度的话,有两个方案:
-
所有的tab公用同一个图表,切换tab时,更改图表的数据和语法
chart.clear(); chart.source(data); chart.line()... chart.rener();
-
tab切换后,调用chart的 forceFit方法,此时会重新进行宽度的计算
chart.forceFit();
from g2.
Related Issues (20)
- 官方示例中toolTip为false为什么还会有悬浮框显示 HOT 1
- 多个漏斗图同时渲染时,其中1个或者两个都会,渲染之后又消失掉 HOT 2
- 折线图设置滚动条后,为0值的point样式在滚动之后,会被坐标轴的线给挡住 HOT 1
- 柱折组合图。.scale('series', { independent: true })表示含义是什么
- 【G2 多轴图】多数据的柱形折线混合图,拖动滚动条,tooltip框内容显示错误 (BUG情况与6335相同,但是还有两个小BUG一并列出)
- 雷达图,维度和颜色 拖入同一个字段,tooltip 内展示的颜色不正确
- 饼图怎么支持排序 HOT 1
- 如何能调节shape的层级 使其不遮挡pieLabel
- 图形宽度设置百分比 HOT 1
- 散点图label 设置 position:inside 后 ,如何实现 内容 超出省略的功能
- 分组条形图提示错误 HOT 1
- chrome 85版本 配置了polyfill之后饼图的tooltip依旧报错 HOT 19
- 【g2】 【v5.2.1】报错,图表无法显示;报错内容:ReferenceError: group is not defined HOT 4
- 【V5】legend itemMarker 的内置类型是否可以扩展? HOT 3
- 柱线混合图,坐标轴刻度不对齐,有什么方法可以对齐 HOT 5
- 新版本g2 5.2.1 没有保存图片的方法了, chart.downloadImage()不能使用显示不存在这个方法 HOT 1
- 柱状统计图的x轴部分名称显示不出来 HOT 2
- 仪表盘 中间文字 显示不需要的 toopTip
- G2 V4 的 columnWidthRatio 配置,在 G2 V5 如何实现相似效果 HOT 8
- 关于文档查找API使用说明找不到的问题 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g2.