Chart Transition

<!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="Chart Transition">
    <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>

$('#close-mask').on('click', function() {
    $('.chart-mask').removeClass('visible');
  });

// draw line chart
  var lineData = [{
    time: '2016-08-08 00:00:00',
    tem: 10
  }, {
    time: '2016-08-08 00:10:00',
    tem: 22
  }, {
    time: '2016-08-08 00:30:00',
    tem: 20
  }, {
    time: '2016-08-09 00:35:00',
    tem: 26
  }, {
    time: '2016-08-09 01:00:00',
    tem: 20
  }, {
    time: '2016-08-09 01:20:00',
    tem: 26
  }, {
    time: '2016-08-10 01:40:00',
    tem: 28
  }, {
    time: '2016-08-10 02:00:00',
    tem: 20
  }, {
    time: '2016-08-10 02:20:00',
    tem: 18
  }];
  var lineChart = new F2.Chart({
    id: 'line',
    pixelRatio: window.devicePixelRatio,
    padding: [25, 0, 0]
  });
  lineChart.source(lineData, {
    time: {
      range: [0, 1],
      type: 'timeCat'
    }
  });
  lineChart.axis(false);
  lineChart.tooltip(false);
  lineChart.line().position('time*tem').shape('smooth').color('#fff').size(2).animate({
    appear: {
      duration: 800
    }
  });
  lineChart.area().position('time*tem').shape('smooth').style({
    fillOpacity: 0.2,
    fill: '#fff'
  }).animate({
    appear: {
      duration: 800
    }
  });
  lineChart.render();

// draw bar chart
  var barData = [{
    x: '01',
    y: 38
  }, {
    x: '02',
    y: 52
  }, {
    x: '03',
    y: 61
  }, {
    x: '04',
    y: 145
  }, {
    x: '05',
    y: 48
  }, {
    x: '06',
    y: 38
  }, {
    x: '07',
    y: 38
  }, {
    x: '08',
    y: 38
  }];
  var barChart = new F2.Chart({
    id: 'bar',
    pixelRatio: window.devicePixelRatio,
    padding: [25, 'auto', 'auto']
  });
  barChart.source(barData);
  barChart.tooltip(false);
  barChart.axis('x', {
    label: {
      fill: '#fff'
    },
    line: null
  });
  barChart.axis('y', {
    label: {
      fill: '#fff'
    },
    grid: {
      lineDash: null,
      stroke: 'rgba(255, 255, 255, 0.2)'
    }
  });
  barChart.interval().position('x*y').color('#fff');
  barChart.render();
</script>

</body>
</html>

Gallery

图表交互

折线图

面积图

柱状图

饼图

雷达图

点图

股票图

功能组件

其他图表

Chart Transition