地平线图 - AntV

其他

地平线图

地平线图，面积图的特例，加上了基准值和上限

<!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 src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  var series = {
    0: "All Industries",
    32229: "Nonagriculture, Private Wage and Salary Workers",
    32230: "Mining and Extraction",
    32231: "Construction",
    32232: "Manufacturing",
    32233: "Durable goods manufacturing",
    32234: "Nondurable goods manufacturing",
    32235: "Wholesale and Retail Trade",
    32236: "Transportation and Utilities",
    32237: "Information",
    32238: "Finance",
    32239: "Business services",
    32240: "Education and Health",
    32241: "Leisure and hospitality",
    32242: "Other",
    35109: "Agriculture",
    28615: "Government",
    35181: "Self-employed"
  };
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/unemployment.json', function(data) {
    var dv = new DataSet.View().source(data);
    dv.transform({
      type: 'map',
      callback: function callback(row) {
        row.series = series[row.series];
        return row;
      }
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: ['50%', 0, 0]
    });
    chart.source(dv, {
      date: {
        type: 'time'
      },
      rate: {
        min: 0
      }
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip(false);
    chart.area().position('date*rate').color('series').opacity(0.85);
    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 src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  var series = {
    0: "All Industries",
    32229: "Nonagriculture, Private Wage and Salary Workers",
    32230: "Mining and Extraction",
    32231: "Construction",
    32232: "Manufacturing",
    32233: "Durable goods manufacturing",
    32234: "Nondurable goods manufacturing",
    32235: "Wholesale and Retail Trade",
    32236: "Transportation and Utilities",
    32237: "Information",
    32238: "Finance",
    32239: "Business services",
    32240: "Education and Health",
    32241: "Leisure and hospitality",
    32242: "Other",
    35109: "Agriculture",
    28615: "Government",
    35181: "Self-employed"
  };
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/unemployment.json', function(data) {
    var dv = new DataSet.View().source(data);
    dv.transform({
      type: 'map',
      callback: function callback(row) {
        row.series = series[row.series];
        return row;
      }
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: ['50%', 0, 0]
    });
    chart.source(dv, {
      date: {
        type: 'time'
      },
      rate: {
        min: 0
      }
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip(false);
    chart.area().position('date*rate').color('series').opacity(0.85);
    chart.render();
  });
</script>
</body>
</html>

图表简介

地平线图，面积图的特例，加上了基准值和上限

了解更多

图表用法

用于描述数据基于某个基准值的变化趋势，忽略超过某个上限的信息

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接