基础折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="基础折线图">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
    
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>
  <script>
  var data = [{
    date: "2017-06-05",
    value: 116
  }, {
    date: "2017-06-06",
    value: 129
  }, {
    date: "2017-06-07",
    value: 135
  }, {
    date: "2017-06-08",
    value: 86
  }, {
    date: "2017-06-09",
    value: 73
  }, {
    date: "2017-06-10",
    value: 85
  }, {
    date: "2017-06-11",
    value: 73
  }, {
    date: "2017-06-12",
    value: 68
  }, {
    date: "2017-06-13",
    value: 92
  }, {
    date: "2017-06-14",
    value: 130
  }, {
    date: "2017-06-15",
    value: 245
  }, {
    date: "2017-06-16",
    value: 139
  }, {
    date: "2017-06-17",
    value: 115
  }, {
    date: "2017-06-18",
    value: 111
  }, {
    date: "2017-06-19",
    value: 309
  }, {
    date: "2017-06-20",
    value: 206
  }, {
    date: "2017-06-21",
    value: 137
  }, {
    date: "2017-06-22",
    value: 128
  }, {
    date: "2017-06-23",
    value: 85
  }, {
    date: "2017-06-24",
    value: 94
  }, {
    date: "2017-06-25",
    value: 71
  }, {
    date: "2017-06-26",
    value: 106
  }, {
    date: "2017-06-27",
    value: 84
  }, {
    date: "2017-06-28",
    value: 93
  }, {
    date: "2017-06-29",
    value: 85
  }, {
    date: "2017-06-30",
    value: 73
  }, {
    date: "2017-07-01",
    value: 83
  }, {
    date: "2017-07-02",
    value: 125
  }, {
    date: "2017-07-03",
    value: 107
  }, {
    date: "2017-07-04",
    value: 82
  }, {
    date: "2017-07-05",
    value: 44
  }, {
    date: "2017-07-06",
    value: 72
  }, {
    date: "2017-07-07",
    value: 106
  }, {
    date: "2017-07-08",
    value: 107
  }, {
    date: "2017-07-09",
    value: 66
  }, {
    date: "2017-07-10",
    value: 91
  }, {
    date: "2017-07-11",
    value: 92
  }, {
    date: "2017-07-12",
    value: 113
  }, {
    date: "2017-07-13",
    value: 107
  }, {
    date: "2017-07-14",
    value: 131
  }, {
    date: "2017-07-15",
    value: 111
  }, {
    date: "2017-07-16",
    value: 64
  }, {
    date: "2017-07-17",
    value: 69
  }, {
    date: "2017-07-18",
    value: 88
  }, {
    date: "2017-07-19",
    value: 77
  }, {
    date: "2017-07-20",
    value: 83
  }, {
    date: "2017-07-21",
    value: 111
  }, {
    date: "2017-07-22",
    value: 57
  }, {
    date: "2017-07-23",
    value: 55
  }, {
    date: "2017-07-24",
    value: 60
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });

chart.source(data, {
    value: {
      tickCount: 5,
      min: 0
    },
    date: {
      type: 'timeCat',
      range: [0, 1],
      tickCount: 3
    }
  });
  chart.tooltip({
    custom: true,
    showXTip: true,
    showYTip: true,
    snap: true,
    crosshairsType: 'xy',
    crosshairsStyle: {
      lineDash: [2]
    }
  });
  chart.axis('date', {
    label: function label(text, index, total) {
      var textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      } else if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  });
  chart.line().position('date*value');
  chart.render();
</script>

</body>
</html>

图表简介

Line Chart，基础折线图。折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

了解更多

图表用法

在折线图中，数据是递增还是递减、增减的速率、增减的规律（周期性、螺旋性等）、峰值等特征都可以清晰地反映出来。所以，折线图常用来分析数据随时间的变化趋势，也可用来分析多组数据随时间变化的相互作用和相互影响。例如可用来分析某类商品或是某几类相关的商品随时间变化的销售情况，从而进一步预测未来的销售情况。在折线图中，一般水平轴（X轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y轴）代表不同时刻的数据的大小。

关联图表

面积图

Gallery

图表交互

折线图

面积图

柱状图

饼图

雷达图

点图

股票图

功能组件

其他图表

图表简介

图表用法

关联图表