路径图 - 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 _G = G2,
    Shape = _G.Shape,
    Util = _G.Util,
    Chart = _G.Chart;

Shape.registerShape('line', 'lineWidthArrow', {
    draw: function draw(cfg, container) {
      var points = cfg.points;
      var attrs = Util.mix({}, {
        stroke: cfg.color,
        lineWidth: cfg.size
      }, cfg.style);
      var pathGroup = container.addGroup();
      for (var i = 0; i < points.length; i++) {
        var path = [];
        path.push(['M', points[i].x, points[i].y]);
        if (i !== points.length - 1) {
          path.push(['L', points[i + 1].x, points[i + 1].y]);
        }

pathGroup.addShape('path', {
          attrs: Util.mix({
            path: path,
            endArrow: true,
            arrowLength: 10,
            arrowAngle: 45
          }, attrs)
        });
      }

return pathGroup;
    }
  });
  var data = [{
    consumption: 0.65,
    price: 1,
    year: 1965
  }, {
    consumption: 0.66,
    price: 1.05,
    year: 1966
  }, {
    consumption: 0.64,
    price: 1.1,
    year: 1967
  }, {
    consumption: 0.63,
    price: 1.12,
    year: 1968
  }, {
    consumption: 0.55,
    price: 1.15,
    year: 1969
  }, {
    consumption: 0.57,
    price: 1.19,
    year: 1970
  }, {
    consumption: 0.58,
    price: 1.14,
    year: 1971
  }, {
    consumption: 0.59,
    price: 1,
    year: 1972
  }, {
    consumption: 0.57,
    price: 0.96,
    year: 1973
  }, {
    consumption: 0.55,
    price: 0.92,
    year: 1974
  }, {
    consumption: 0.54,
    price: 0.88,
    year: 1975
  }, {
    consumption: 0.55,
    price: 0.87,
    year: 1976
  }, {
    consumption: 0.42,
    price: 0.89,
    year: 1977
  }, {
    consumption: 0.28,
    price: 1,
    year: 1978
  }, {
    consumption: 0.15,
    price: 1.1,
    year: 1979
  }];
  var chart = new Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(data);
  chart.tooltip({
    showTitle: false,
    itemTpl: '<li data-index={index}>' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '<span>{year}</span></br>' + '<span style="padding-left: 16px">consumption: {consumption}</span></br>' + '<span style="padding-left: 16px">price: {price}</span></br>'
  });
  chart.path().position('price*consumption').shape('lineWidthArrow').color('#1890ff').label('year', {
    offset: 16,
    textStyle: {
      fill: '#8c8c8c'
    }
  }, function(val) {
    return val + '年';
  }).size(2).tooltip(false);
  chart.point().position('price*consumption').shape('circle').size(10).active(false).tooltip('year*consumption*price', function(year, consumption, price) {
    return {
      year: year,
      consumption: consumption,
      price: price
    };
  }).style({
    fill: '#fff',
    fillOpacity: 0
  });
  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 _G = G2,
    Shape = _G.Shape,
    Util = _G.Util,
    Chart = _G.Chart;

图表简介

路径图

图表用法

不同于折线图，路径图的横轴按照原有数据的顺序展示。

关联图表

折线图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接