legend-html

组件

legend-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>legend-html</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/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<style type="text/css">
    #canvas .g2-tooltip {
      position:absolute;
      visibility:hidden;
      border-style:solid;
      white-space:nowrap;
      z-index:9;
      transition:left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      background-color:rgb(255, 255, 255);
      border-width:1px;
      border-color: #999;
      border-radius:4px;
      color: #444;
      font-style:normal;
      font-variant:normal;
      font-weight:normal;
      font-stretch:normal;
      font-size:14px;
      font-family:sans-serif;
      line-height:21px;
      padding:5px;
    }

#canvas .g2-tooltip-list {
      margin: 5px ;
      list-style-type:none;
      padding:0;
    }
    #canvas .g2-legend {
      top: 45%!important;
    }
  </style>
<script>
  var data = [{
    country: 'Lithuania',
    litres: 501.9
  }, {
    country: 'Czech',
    litres: 301.9
  }, {
    country: 'Ireland',
    litres: 201.1
  }, {
    country: 'Germany',
    litres: 165.8
  }, {
    country: 'Australia',
    litres: 139.9
  }, {
    country: 'Austria',
    litres: 128.3
  }, {
    country: 'UK',
    litres: 99
  }, {
    country: 'Belgium',
    litres: 60
  }, {
    country: 'Netherlands',
    litres: 50
  }];

var ds = new DataSet();
  var dv = ds.createView().source(data).transform({
    type: 'percent',
    field: 'litres',
    dimension: 'country',
    as: 'percent'
  });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>legend-html</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/assets/lib/jquery-3.2.1.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>
<style type="text/css">
    #canvas .g2-tooltip {
      position:absolute;
      visibility:hidden;
      border-style:solid;
      white-space:nowrap;
      z-index:9;
      transition:left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      background-color:rgb(255, 255, 255);
      border-width:1px;
      border-color: #999;
      border-radius:4px;
      color: #444;
      font-style:normal;
      font-variant:normal;
      font-weight:normal;
      font-stretch:normal;
      font-size:14px;
      font-family:sans-serif;
      line-height:21px;
      padding:5px;
    }

var ds = new DataSet();
  var dv = ds.createView().source(data).transform({
    type: 'percent',
    field: 'litres',
    dimension: 'country',
    as: 'percent'
  });

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

相关链接