雷达面积图

<!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 = [{
    item: 'Design',
    user: '用户 A',
    score: 70
  }, {
    item: 'Design',
    user: '用户 B',
    score: 30
  }, {
    item: 'Development',
    user: '用户 A',
    score: 60
  }, {
    item: 'Development',
    user: '用户 B',
    score: 70
  }, {
    item: 'Marketing',
    user: '用户 A',
    score: 50
  }, {
    item: 'Marketing',
    user: '用户 B',
    score: 60
  }, {
    item: 'Users',
    user: '用户 A',
    score: 40
  }, {
    item: 'Users',
    user: '用户 B',
    score: 50
  }, {
    item: 'Test',
    user: '用户 A',
    score: 60
  }, {
    item: 'Test',
    user: '用户 B',
    score: 70
  }, {
    item: 'Language',
    user: '用户 A',
    score: 70
  }, {
    item: 'Language',
    user: '用户 B',
    score: 50
  }, {
    item: 'Technology',
    user: '用户 A',
    score: 70
  }, {
    item: 'Technology',
    user: '用户 B',
    score: 40
  }, {
    item: 'Support',
    user: '用户 A',
    score: 60
  }, {
    item: 'Support',
    user: '用户 B',
    score: 40
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });

chart.coord('polar');
  chart.source(data, {
    score: {
      min: 0,
      max: 120,
      nice: false,
      tickCount: 4
    }
  });
  chart.tooltip({
    custom: true, // 自定义 tooltip 内容框
    onChange: function onChange(obj) {
      var legend = chart.get('legendController').legends.top[0];
      var tooltipItems = obj.items;
      var legendItems = legend.items;
      var map = {};
      legendItems.map(function(item) {
        map[item.name] = _.clone(item);
      });
      tooltipItems.map(function(item) {
        var name = item.name;
        var value = item.value;
        if (map[name]) {
          map[name].value = value;
        }
      });
      legend.setItems(_.values(map));
    },
    onHide: function onHide() {
      var legend = chart.get('legendController').legends.top[0];
      legend.setItems(chart.getLegendItems().country);
    }
  });
  chart.axis('score', {
    label: function label(text, index, total) {
      if (index === total - 1) {
        return null;
      }
      return {
        top: true
      };
    },
    grid: function grid(text) {
      if (text === '120') {
        return {
          lineDash: null
        };
      }
    },
    line: {
      top: false
    }
  });
  chart.area().position('item*score').color('user').animate({
    appear: {
      animation: 'groupWaveIn'
    }
  });
  chart.line().position('item*score').color('user').animate({
    appear: {
      animation: 'groupWaveIn'
    }
  });
  chart.point().position('item*score').color('user').style({
    stroke: '#fff',
    lineWidth: 1
  }).animate({
    appear: {
      delay: 300
    }
  });

chart.render();
</script>

</body>
</html>

图表简介

Radar Chart，基础雷达图

了解更多

图表用法

雷达图是以相同点开始的轴上表示的三个或更多个定量变量的二维图形的形式显示多变量数据的图形方法。轴的相对位置和角度通常是不知情的。

关联图表

折线图

Gallery

图表交互

折线图

面积图

柱状图

饼图

雷达图

点图

股票图

功能组件

其他图表

图表简介

图表用法

关联图表