使用G2创建区间柱状图/How To Use G2 To Make Range Bar Charts

Summary:

G2 is a set of graphically-based graphical syntax that is data-driven and highly user-friendly and extensible, allowing users to build a wide variety of interactive statistics without having to worry about detailed implementation details chart.G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

您将从这个教程中学到什么

如何引入js文件
如何定义容器
如何定义数据
如何引用数据
如何渲染图表

学习此教程的必备条件

你需要一个代码编辑器，比如Eclipse，EditPlus，EmEditor等等
你需要下载g2.js，并在文件中调用

教程难度

容易

教程内容

演示效果

1. 知识点A - 如何引入js文件

<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>

使用内嵌对js文件进行引入，用于后期图表使用。

2. 知识点B - 如何定义容器

<div id="qujianzhuzhuangtu"></div>

使用

定义容器，用于展示图表。容器名：qujianzhuzhuangtu。

3. 知识点C - 如何定义数据

  const shuju = [
    { xAxis: '第1天', yAxis: [ 75, 100 ] },
    { xAxis: '第2天', yAxis: [ 55, 108 ] },
    { xAxis: '第3天', yAxis: [ 35, 129 ] },
    { xAxis: '第4天', yAxis: [ 55, 155 ] },
    { xAxis: '第5天', yAxis: [ 46, 120 ] },
    { xAxis: '第6天', yAxis: [ 25, 99 ] },
    { xAxis: '第7天', yAxis: [ 19, 56 ] },
    { xAxis: '第8天', yAxis: [ 19, 34 ] },
    { xAxis: '第9天', yAxis: [ 75, 100 ] },
    { xAxis: '第10天', yAxis: [ 55, 108 ] },
    { xAxis: '第11天', yAxis: [ 35, 129 ] },
    { xAxis: '第12天', yAxis: [ 55, 155 ] },
    { xAxis: '第13天', yAxis: [ 46, 120 ] },
    { xAxis: '第14天', yAxis: [ 25, 99 ] },
    { xAxis: '第15天', yAxis: [ 19, 56 ] },
    { xAxis: '第16天', yAxis: [ 19, 34 ] },
    { xAxis: '第17天', yAxis: [ 75, 100 ] },
    { xAxis: '第18天', yAxis: [ 55, 108 ] },
    { xAxis: '第19天', yAxis: [ 35, 129 ] },
    { xAxis: '第20天', yAxis: [ 55, 155 ] },
    { xAxis: '第21天', yAxis: [ 46, 120 ] },
  ];

const: 用于定义数组。
shuju：定义为数组名。
格式：{数据名称:'x轴数据值',数据名称:'[y轴起点数据值,y轴终点数据值]'}

4. 知识点D - 如何引用数据

  const chart = new G2.Chart({
    container: 'qujianzhuzhuangtu',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(shuju);

chart：创建一个chart实例，返回一个Chart对象，建议在单个容器上只初始化一个Chart实例。
container：定于数据从qujianzhuzhuangtu数组取值。
forceFit: 定义图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。
height: 定义图表高度。
window.innerHeight: 获取页面可用高度。
source：定义为chart装载数据，返回chart对象。

5. 知识点E - 如何渲染图表

  chart.interval().position('xAxis*yAxis');
  chart.render();

interval：创建柱图，返回一个 geom 对象。
position：position 属性会对多个字段进行数据的映射。以chart.interval().position('xy') 为例，interval代表柱状图，即最后需要生成柱状图，而position代表位置，position('x*y')代表数据在图形中的位置由x和y这两个维度的变量决定，(x1,y1) 这样的数值对，最后就会被转换为画布上对应的坐标点。
render：用于将图表渲染至画布。

完整代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区间柱状图</title>
</head>
<body>
<div id="qujianzhuzhuangtu"></div>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script>
  const shuju = [
    { xAxis: '第1天', yAxis: [ 75, 100 ] },
    { xAxis: '第2天', yAxis: [ 55, 108 ] },
    { xAxis: '第3天', yAxis: [ 35, 129 ] },
    { xAxis: '第4天', yAxis: [ 55, 155 ] },
    { xAxis: '第5天', yAxis: [ 46, 120 ] },
    { xAxis: '第6天', yAxis: [ 25, 99 ] },
    { xAxis: '第7天', yAxis: [ 19, 56 ] },
    { xAxis: '第8天', yAxis: [ 19, 34 ] },
    { xAxis: '第9天', yAxis: [ 75, 100 ] },
    { xAxis: '第10天', yAxis: [ 55, 108 ] },
    { xAxis: '第11天', yAxis: [ 35, 129 ] },
    { xAxis: '第12天', yAxis: [ 55, 155 ] },
    { xAxis: '第13天', yAxis: [ 46, 120 ] },
    { xAxis: '第14天', yAxis: [ 25, 99 ] },
    { xAxis: '第15天', yAxis: [ 19, 56 ] },
    { xAxis: '第16天', yAxis: [ 19, 34 ] },
    { xAxis: '第17天', yAxis: [ 75, 100 ] },
    { xAxis: '第18天', yAxis: [ 55, 108 ] },
    { xAxis: '第19天', yAxis: [ 35, 129 ] },
    { xAxis: '第20天', yAxis: [ 55, 155 ] },
    { xAxis: '第21天', yAxis: [ 46, 120 ] },
  ];
  const chart = new G2.Chart({
    container: 'qujianzhuzhuangtu',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(shuju);
  chart.interval().position('xAxis*yAxis');
  chart.render();
</script>
</body>
</html>

最终效果

系列课程

如果您喜欢我的教程，可以在我的个人档案页面，获取更多信息。
If you like my tutorial , You can check out your profile for more such tutorials.
您可以使用zqz-tutorial标签快速查看我发布的所有教程
You can use the "zqz-tutorial" tag to see all the tutorials I've posted.

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @hui.zhao I am @utopian-io. I have just upvoted you!

Achievements

You have less than 500 followers. Just gave you a gift to help you succeed!
Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Sort Order:

Trending

[-]

manishmike10 (63) · 7 years ago

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

$2.42

2 votes

utopian.tip (46) · 7 years ago

Hey @manishmike10, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

$0.00

espoem (67) · 7 years ago

REJECTED. Taken from https://antv.alipay.com/zh-cn/g2/3.x/demo/bar/ranged-column.html . The values were slightly adjusted.

hui.zhao (56) · 7 years ago

希望大家喜欢~

utopian-io (71) · 7 years ago