带标识的百分比堆叠条形图

堆叠条形图

带标识的百分比堆叠条形图

堆叠条形图，带标识

<!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 measureKeys = ['Europe', 'Asia', 'Africa'];
  var originalData = [{
    year: '1750',
    Europe: 20,
    Asia: 30,
    Africa: 50
  }, {
    year: '1800',
    Europe: 30,
    Asia: 40,
    Africa: 30
  }, {
    year: '1850',
    Europe: 50,
    Asia: 20,
    Africa: 30
  }];
  var colorSet = {
    Europe: '#4FAAEB',
    Asia: '#9AD681',
    Africa: '#FED46B'
  };

// 计算每个柱子的占比
  var ds = new DataSet();
  var dv = ds.createView().source(originalData).transform({
    type: 'fold',
    fields: measureKeys,
    key: 'key',
    value: 'value'
  }).transform({
    type: 'percent',
    field: 'value',
    dimension: 'key',
    groupBy: ['year'],
    as: 'percent'
  });

// 初始化图表实例
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });

chart.source(dv, {
    percent: {
      min: 0,
      formatter: function formatter(val) {
        return (val * 100).toFixed(2) + '%';
      }
    }
  });

// 是否水平翻转
  // 改这个参数看效果！
  var transposeCoord = true;

if (transposeCoord) {
    chart.coord().transpose();
  }

chart.intervalStack().position('year*percent').color('key', function(value) {
    return colorSet[value];
  });

<!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 measureKeys = ['Europe', 'Asia', 'Africa'];
  var originalData = [{
    year: '1750',
    Europe: 20,
    Asia: 30,
    Africa: 50
  }, {
    year: '1800',
    Europe: 30,
    Asia: 40,
    Africa: 30
  }, {
    year: '1850',
    Europe: 50,
    Asia: 20,
    Africa: 30
  }];
  var colorSet = {
    Europe: '#4FAAEB',
    Asia: '#9AD681',
    Africa: '#FED46B'
  };

// 初始化图表实例
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });

chart.source(dv, {
    percent: {
      min: 0,
      formatter: function formatter(val) {
        return (val * 100).toFixed(2) + '%';
      }
    }
  });

// 是否水平翻转
  // 改这个参数看效果！
  var transposeCoord = true;

if (transposeCoord) {
    chart.coord().transpose();
  }

chart.intervalStack().position('year*percent').color('key', function(value) {
    return colorSet[value];
  });

图表简介

堆叠条形图，带标识

了解更多

图表用法

在百分比堆叠图中加入标识，增强了能力，能显示柱子之间的数值变化趋势

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接