legend-图例位置

组件

legend-图例位置

legend支持12个位置设定值，点击下拉列表体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>legend-图例位置</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>
  //page style
  $('body').html('<select id="position-selector"><option value ="top-left">top-left</option><option value ="top-center">top-center</option><option value="top-right">top-right</option><option value ="bottom-left">bottom-left</option><option value ="bottom-center">bottom-center</option><option value="bottom-right">bottom-right</option> <option value="left-top">left-top</option><option value="left-center">left-center</option><option value="left-bottom">left-bottom</option><option value="right-top">right-top</option><option value="right-center">right-center</option><option value="right-bottom">right-bottom</option></select><div id="mountNode"></div>');
  $('#mountNode').css("margin-top", "55px");
  $("#position-selector").css({
    'position': 'absolute',
    'top': '10px',
    'left': '10px',
    'width': '110px',
    'height': '30px',
    'z-index': 1000
  });
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/data-RgqdN.json', function(data) {
    var ds = new DataSet();
    var dv = ds.createView().source(data);
    dv.transform({
      type: 'map',
      callback: function callback(row) {
        row.range = [row.younger, row.older];
        return row;
      }
    });
    dv.transform({
      type: 'fold',
      fields: ['younger', 'older'], // 展开字段集
      key: 'type', // key字段
      value: 'value' // value字段
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight - 60,
      padding: 'auto'
    });

chart.source(dv, {
      year: {
        type: 'linear',
        tickInterval: 10
      },
      range: {
        type: 'linear',
        min: 10,
        max: 45,
        tickInterval: 5
      },
      value: {
        type: 'linear',
        min: 10,
        max: 45,
        tickInterval: 5
      }
    });
    chart.axis('value', false);
    chart.area().position('year*range').color('#045493').opacity(0.05).tooltip(false);
    chart.line().position('year*value').color('type', ['#d97841', '#4495c2']).size(3).style({
      opacity: 0.7
    });
    chart.render();
    $("#position-selector").change(function() {
      var value = $("#position-selector").val();
      chart.legend({
        position: value
      });
      chart.repaint();
    });
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>legend-图例位置</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>
  //page style
  $('body').html('<select id="position-selector"><option value ="top-left">top-left</option><option value ="top-center">top-center</option><option value="top-right">top-right</option><option value ="bottom-left">bottom-left</option><option value ="bottom-center">bottom-center</option><option value="bottom-right">bottom-right</option> <option value="left-top">left-top</option><option value="left-center">left-center</option><option value="left-bottom">left-bottom</option><option value="right-top">right-top</option><option value="right-center">right-center</option><option value="right-bottom">right-bottom</option></select><div id="mountNode"></div>');
  $('#mountNode').css("margin-top", "55px");
  $("#position-selector").css({
    'position': 'absolute',
    'top': '10px',
    'left': '10px',
    'width': '110px',
    'height': '30px',
    'z-index': 1000
  });
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/data-RgqdN.json', function(data) {
    var ds = new DataSet();
    var dv = ds.createView().source(data);
    dv.transform({
      type: 'map',
      callback: function callback(row) {
        row.range = [row.younger, row.older];
        return row;
      }
    });
    dv.transform({
      type: 'fold',
      fields: ['younger', 'older'], // 展开字段集
      key: 'type', // key字段
      value: 'value' // value字段
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight - 60,
      padding: 'auto'
    });

图表简介

legend支持12个位置设定值，点击下拉列表体验。

图表用法

数据来源：德国联邦统计局人口结构预测https://service.destatis.de/bevoelkerungspyramide/#!y=2060。、

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接