G2 - The Grammar Of Graphics

雷达图 / 带缩放动画的区域雷达图

源码

<!DOCTYPE html>
                                    <html>

<head>
                                        <meta charset="utf-8">
                                        <title>带缩放动画的区域雷达图</title>
                                        <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
                                        
                                        <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.7/index.js "></script>
                                    </head>

<body>
                                        <canvas id="c1" style="width:416px;height:218px;"></canvas>
                                        
                                        <script>
GM.Global.pixelRatio = 2;

var data = [
  {name: '张飞',props: '智力', value: 65},
  {name: '张飞',props: '武力', value: 97},
  {name: '张飞',props: '政治', value: 50},
  {name: '张飞',props: '统帅', value: 92},
  {name: '张飞',props: '忠诚', value: 100},

{name: '关羽',props: '智力', value: 80},
  {name: '关羽',props: '武力', value: 94},
  {name: '关羽',props: '政治', value: 70},
  {name: '关羽',props: '统帅', value: 95},
  {name: '关羽',props: '忠诚', value: 99}
];

var chart = new GM.Chart({
  id: 'c1'
});

chart.coord('polar');
chart.source(data, {
    value: {
        min: 0,
        tickInterval: 20
    }
});

//配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('props', {
    label: {
        fontSize: 14 
    },
    line: null
});
chart.axis('value', {
    label: {
        fontSize: 14 
    }
});

chart.area().position('props*value').color('name').style({
        opacity: 0.6
    });
// x和y轴同时缩放的动画
chart.animate().scalexy();
chart.render();
</script>

</body>

</html>