区间面积图 - AntV

基础面积图

区间面积图

Range Area Chart，范围区域图是区域图的变体，可以绘制数据范围，图表中的每个点由两个y值指定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>区间面积图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
  var data = [{
    time: 1246406400000,
    temperature: [14.3, 27.7]
  }, {
    time: 1246492800000,
    temperature: [14.5, 27.8]
  }, {
    time: 1246579200000,
    temperature: [15.5, 29.6]
  }, {
    time: 1246665600000,
    temperature: [16.7, 30.7]
  }, {
    time: 1246752000000,
    temperature: [16.5, 25.0]
  }, {
    time: 1246838400000,
    temperature: [17.8, 25.7]
  }, {
    time: 1246924800000,
    temperature: [13.5, 24.8]
  }, {
    time: 1247011200000,
    temperature: [10.5, 21.4]
  }, {
    time: 1247097600000,
    temperature: [9.2, 23.8]
  }, {
    time: 1247184000000,
    temperature: [11.6, 21.8]
  }, {
    time: 1247270400000,
    temperature: [10.7, 23.7]
  }, {
    time: 1247356800000,
    temperature: [11.0, 23.3]
  }, {
    time: 1247443200000,
    temperature: [11.6, 23.7]
  }, {
    time: 1247529600000,
    temperature: [11.8, 20.7]
  }, {
    time: 1247616000000,
    temperature: [12.6, 22.4]
  }, {
    time: 1247702400000,
    temperature: [13.6, 19.6]
  }, {
    time: 1247788800000,
    temperature: [11.4, 22.6]
  }, {
    time: 1247875200000,
    temperature: [13.2, 25.0]
  }, {
    time: 1247961600000,
    temperature: [14.2, 21.6]
  }, {
    time: 1248048000000,
    temperature: [13.1, 17.1]
  }, {
    time: 1248134400000,
    temperature: [12.2, 15.5]
  }, {
    time: 1248220800000,
    temperature: [12.0, 20.8]
  }, {
    time: 1248307200000,
    temperature: [12.0, 17.1]
  }, {
    time: 1248393600000,
    temperature: [12.7, 18.3]
  }, {
    time: 1248480000000,
    temperature: [12.4, 19.4]
  }, {
    time: 1248566400000,
    temperature: [12.6, 19.9]
  }, {
    time: 1248652800000,
    temperature: [11.9, 20.2]
  }, {
    time: 1248739200000,
    temperature: [11.0, 19.3]
  }, {
    time: 1248825600000,
    temperature: [10.8, 17.8]
  }, {
    time: 1248912000000,
    temperature: [11.8, 18.5]
  }, {
    time: 1248998400000,
    temperature: [10.8, 16.1]
  }];

var averages = [{
    time: 1246406400000,
    temperature: 21.5
  }, {
    time: 1246492800000,
    temperature: 22.1
  }, {
    time: 1246579200000,
    temperature: 23
  }, {
    time: 1246665600000,
    temperature: 23.8
  }, {
    time: 1246752000000,
    temperature: 21.4
  }, {
    time: 1246838400000,
    temperature: 21.3
  }, {
    time: 1246924800000,
    temperature: 18.3
  }, {
    time: 1247011200000,
    temperature: 15.4
  }, {
    time: 1247097600000,
    temperature: 16.4
  }, {
    time: 1247184000000,
    temperature: 17.7
  }, {
    time: 1247270400000,
    temperature: 17.5
  }, {
    time: 1247356800000,
    temperature: 17.6
  }, {
    time: 1247443200000,
    temperature: 17.7
  }, {
    time: 1247529600000,
    temperature: 16.8
  }, {
    time: 1247616000000,
    temperature: 17.7
  }, {
    time: 1247702400000,
    temperature: 16.3
  }, {
    time: 1247788800000,
    temperature: 17.8
  }, {
    time: 1247875200000,
    temperature: 18.1
  }, {
    time: 1247961600000,
    temperature: 17.2
  }, {
    time: 1248048000000,
    temperature: 14.4
  }, {
    time: 1248134400000,
    temperature: 13.7
  }, {
    time: 1248220800000,
    temperature: 15.7
  }, {
    time: 1248307200000,
    temperature: 14.6
  }, {
    time: 1248393600000,
    temperature: 15.3
  }, {
    time: 1248480000000,
    temperature: 15.3
  }, {
    time: 1248566400000,
    temperature: 15.8
  }, {
    time: 1248652800000,
    temperature: 15.2
  }, {
    time: 1248739200000,
    temperature: 14.8
  }, {
    time: 1248825600000,
    temperature: 14.4
  }, {
    time: 1248912000000,
    temperature: 15
  }, {
    time: 1248998400000,
    temperature: 13.6
  }];

var view2 = chart.view();
  view2.source(averages);
  view2.axis(false);
  view2.line().position('time*temperature').size(2);
  view2.point().position('time*temperature').size(4).shape('circle').style({
    stroke: '#fff',
    lineWidth: 1,
    fillOpacity: 1
  });
  chart.render();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>区间面积图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  var data = [{
    time: 1246406400000,
    temperature: [14.3, 27.7]
  }, {
    time: 1246492800000,
    temperature: [14.5, 27.8]
  }, {
    time: 1246579200000,
    temperature: [15.5, 29.6]
  }, {
    time: 1246665600000,
    temperature: [16.7, 30.7]
  }, {
    time: 1246752000000,
    temperature: [16.5, 25.0]
  }, {
    time: 1246838400000,
    temperature: [17.8, 25.7]
  }, {
    time: 1246924800000,
    temperature: [13.5, 24.8]
  }, {
    time: 1247011200000,
    temperature: [10.5, 21.4]
  }, {
    time: 1247097600000,
    temperature: [9.2, 23.8]
  }, {
    time: 1247184000000,
    temperature: [11.6, 21.8]
  }, {
    time: 1247270400000,
    temperature: [10.7, 23.7]
  }, {
    time: 1247356800000,
    temperature: [11.0, 23.3]
  }, {
    time: 1247443200000,
    temperature: [11.6, 23.7]
  }, {
    time: 1247529600000,
    temperature: [11.8, 20.7]
  }, {
    time: 1247616000000,
    temperature: [12.6, 22.4]
  }, {
    time: 1247702400000,
    temperature: [13.6, 19.6]
  }, {
    time: 1247788800000,
    temperature: [11.4, 22.6]
  }, {
    time: 1247875200000,
    temperature: [13.2, 25.0]
  }, {
    time: 1247961600000,
    temperature: [14.2, 21.6]
  }, {
    time: 1248048000000,
    temperature: [13.1, 17.1]
  }, {
    time: 1248134400000,
    temperature: [12.2, 15.5]
  }, {
    time: 1248220800000,
    temperature: [12.0, 20.8]
  }, {
    time: 1248307200000,
    temperature: [12.0, 17.1]
  }, {
    time: 1248393600000,
    temperature: [12.7, 18.3]
  }, {
    time: 1248480000000,
    temperature: [12.4, 19.4]
  }, {
    time: 1248566400000,
    temperature: [12.6, 19.9]
  }, {
    time: 1248652800000,
    temperature: [11.9, 20.2]
  }, {
    time: 1248739200000,
    temperature: [11.0, 19.3]
  }, {
    time: 1248825600000,
    temperature: [10.8, 17.8]
  }, {
    time: 1248912000000,
    temperature: [11.8, 18.5]
  }, {
    time: 1248998400000,
    temperature: [10.8, 16.1]
  }];

图表简介

Range Area Chart，范围区域图是区域图的变体，可以绘制数据范围，图表中的每个点由两个y值指定。

了解更多

图表用法

用于可视化带范围的时序数据。

关联图表

折线图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接