螺旋坐标系 - 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>
  var data = [];
  var n = 31;
  for (var i = 0; i < 372; i++) {
    var now = Date();
    data[i] = {};
    data[i].time = new Date(now).getTime() + i * 1000 * 3600 * 24;
    var random = Math.floor(Math.random() * 10);
    if (i % n > 2 && i % n < 4 || i % n >= 6 && i % n < 7) {
      data[i].value = 30 + random * 7;
    } else if (i % n >= 4 && i % n < 6) {
      data[i].value = 60 + random * 8;
    } else {
      data[i].value = 10 + random * 5;
    }
  }
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [0, 60, 30, 0]
  });
  chart.source(data, {
    time: {
      type: 'timeCat',
      mask: 'YYYY.MM.DD'
    },
    value: {
      min: 0
    }
  });
  chart.coord('helix', {
    startAngle: 0.5 * Math.PI,
    endAngle: 12.5 * Math.PI
  });
  chart.axis('time', {
    line: null
  });
  chart.interval().position('time*value').color('value', '#ffffff-#1890FF').size(0.45);
  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 = [];
  var n = 31;
  for (var i = 0; i < 372; i++) {
    var now = Date();
    data[i] = {};
    data[i].time = new Date(now).getTime() + i * 1000 * 3600 * 24;
    var random = Math.floor(Math.random() * 10);
    if (i % n > 2 && i % n < 4 || i % n >= 6 && i % n < 7) {
      data[i].value = 30 + random * 7;
    } else if (i % n >= 4 && i % n < 6) {
      data[i].value = 60 + random * 8;
    } else {
      data[i].value = 10 + random * 5;
    }
  }
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [0, 60, 30, 0]
  });
  chart.source(data, {
    time: {
      type: 'timeCat',
      mask: 'YYYY.MM.DD'
    },
    value: {
      min: 0
    }
  });
  chart.coord('helix', {
    startAngle: 0.5 * Math.PI,
    endAngle: 12.5 * Math.PI
  });
  chart.axis('time', {
    line: null
  });
  chart.interval().position('time*value').color('value', '#ffffff-#1890FF').size(0.45);
  chart.render();
</script>
</body>
</html>

图表简介

螺旋坐标系

了解更多

图表用法

螺旋图，基于阿基米德螺旋坐标系，常用于绘制随时间变化的数据，从螺旋的中心开始向外绘制。

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接