由于业务需要所有的图表都支持在ie8上能正常显示，且设计在设计图表时未遵循市面上的highcharts、echarts，经过团队调研，最终选择了raphael。本文主要从效果图、基础API、demo三方面来介绍。

  • 首先看一下最终的效果图
  • 基础API

1

2

3

4

5

6

7

8

9

10

11

12

  • 雷达图demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="./raphael.min.js"></script>
</head>

<body>
  <div class="container">
    <div id="rate-chart-wrap" class="rate-chart"></div>
  </div>
  <script type="text/javascript">
    /**
     * 根据圆心、半径、角度得到元素的坐标
     * @return {[type]} [点的坐标]
     */

    function getLocationByDeg(deg, percent, isOutter) {
      var x0 = 160,
        y0 = 160;
      var r = !!percent ? 83 * percent : 93;
      r = percent === 0 ? 3 : r;
      r = !isOutter ? r : 125;
      var x1 = parseInt((x0 + r * Math.cos(deg * 3.14 / 180)).toFixed(0));
      var y1 = parseInt((x0 + r * Math.sin(deg * 3.14 / 180)).toFixed(0));
      return {
        'x': x1,
        'y': y1
      };
    }

    /**
     * 获得所有需要的点的位置
     * @param {[type]} initParams [description]
     * @return {[type]} [description]
     */
    function getDotsPosition(initParams) {
      //所有外面标记点的坐标集合
      var outsideDots = [];
      var outsideTextDots = [];
      var insideDots = [];
      var outLineDots = [];
      var totalOutLineObj = {
        '100': [],
        '75': [],
        '50': [],
        '25': []
      };

      var dotNums = initParams.length;
      var deg = 360 / dotNums; //每个扇形所占的角度
      for (var i = 0; i < dotNums; i++) {
        outsideDots.push(getLocationByDeg(270 - deg * i));
        outsideTextDots.push(getLocationByDeg(270 - deg * i, 1, true));
        insideDots.push(getLocationByDeg((270 - deg * i), (initParams[i].score) / 100));
        outLineDots.push(getLocationByDeg(270 - deg * i, 1));
        totalOutLineObj['100'].push(getLocationByDeg((270 - deg * i), 1));
        totalOutLineObj['75'].push(getLocationByDeg((270 - deg * i), 0.75));
        totalOutLineObj['50'].push(getLocationByDeg((270 - deg * i), 0.5));
        totalOutLineObj['25'].push(getLocationByDeg((270 - deg * i), 0.25));
      }

      return {
        'outsideDots': outsideDots,
        'outsideTextDots': outsideTextDots,
        'insideDots': insideDots,
        'outLineDots': outLineDots,
        'totalOutLineObj': totalOutLineObj
      };
    }

    //将内部的点连接起来并填充颜色
    function drawPath(dots) {
      var length = dots.length;
      var p = ['M'];

      for (var i = 0; i < length; i++) {
        var dot = dots[i];
        p.push(dot.x, dot.y, 'L');
      }
      p = p.slice(0, -1);
      p.push('Z');
      return p;
    }

    function drawRadarChart(initParams) {
      var paramsLength = initParams.length;
      var colors = [
        'rgb(92, 215, 120)',
        'rgb(120, 164, 255)',
        'rgb(200, 150, 254)',
        'rgb(255, 130, 121)',
        'rgb(254, 178, 50)',
        'rgb(177, 221, 48)'
      ];

      for (var i = 0; i < paramsLength; i++) {
        initParams[i]['color'] = colors[i % 5];
      }

      var dotLength = initParams.length;
      var dotsPosition = getDotsPosition(initParams);
      var outsideDots = dotsPosition.outsideDots,
        outsideTextDots = dotsPosition.outsideTextDots,
        insideDots = dotsPosition.insideDots,
        outLineDots = dotsPosition.outLineDots,
        totalOutLineObj = dotsPosition.totalOutLineObj;

      var paper = Raphael(document.getElementById("rate-chart-wrap"), 320, 320);
      var st = paper.set();

      //画最外层的折线(100%,75%,50%,25)
      paper.path().attr({
        'path': drawPath(totalOutLineObj['100']),
        'fill': 'rgba(148, 255, 139, 0.12)',
        'stroke': 'rgb(205, 241, 205)'
      });

      paper.path().attr({
        'path': drawPath(totalOutLineObj['75']),
        'fill': 'rgba(148, 255, 139, 0.12)',
        'stroke': 'rgb(205, 241, 205)'
      });

      paper.path().attr({
        'path': drawPath(totalOutLineObj['50']),
        'fill': 'rgba(148, 255, 139, 0.12)',
        'stroke': 'rgb(205, 241, 205)'
      });

      paper.path().attr({
        'path': drawPath(totalOutLineObj['25']),
        'fill': 'rgba(148, 255, 139, 0.12)',
        'stroke': 'rgb(205, 241, 205)'
      });

      for (var i = 0; i < dotLength; i++) {
        //画外部的点线文字
        var outsideDot = outsideDots[i];
        var outsideTextDot = outsideTextDots[i];
        var nameY = outsideTextDot.y,
          nameX = outsideTextDot.x,
          scoreY = outsideTextDot.y,
          scoreX = outsideTextDot.x;
        if (nameY < 160) {
          nameY += 20;
        } else if (nameY > 160) {
          scoreY -= 10;
          nameY += 10;
        } else if (nameY == 160) {
          scoreY -= 10;
          nameY += 10;
        }
        st.push(
          paper.path('M' + outLineDots[i].x + ',' + outLineDots[i].y + 'L160,160Z').attr({
            // 'fill': '#eee',
            'stroke': 'rgb(187, 223, 187)'
          }),
          paper.circle(outsideDot.x, outsideDot.y, 3).attr({
            'fill': initParams[i].color,
            'stroke': initParams[i].color
          }),
          paper.text(nameX, nameY, initParams[i].name).attr({
            'font-size': '12px',
            'fill': 'rgb(102, 102, 102)'
          }),
          paper.text(scoreX, scoreY, initParams[i].score).attr({
            'fill': initParams[i].color,
            'font-size': '18px'
          })
        );
      }
      paper.path().attr({
        'path': drawPath(insideDots),
        'fill': '270-rgba(159,240,79,0.3)-rgba(56,189,88,0.4)',
        'stroke': 'rgb(91, 208, 48)'
      });
    }

    drawRadarChart([{
        'name': 'A',
        'score': 15
      }, {
        'name': 'BB',
        'score': 80
      }, {
        'name': 'CCC',
        'score': 60
      }, {
        'name': 'DDDD',
        'score': 86
      }

    ]);
  </script>
</body>
</html>
  • 圆环形进度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="ring-chart" style="background: red"></div>
  <script src="./raphael.min.js">

  </script>

  <script>
  let imgCircleLine = './images/cirle-line.png';
  let imgCircleStroke = './images/circle-stroke.png';

//将内部的点连接起来并填充颜色
function drawPath(dots) {
  var length = dots.length;
  var p = ['M'];
  for (var i = 0; i < length; i++) {
    var dot = dots[i];
    p.push(dot.x, dot.y, 'L');
  }
  p = p.slice(0, -1);
  p.push('Z');
  return p;
}

function getLocationByDeg(percent, isOutter) {
  var deg = -(percent / 100) * 360 - 90;
  var x0 = 70,
      y0 = 70;
  var r = 55;

  r = isOutter ? 69 : r;

  var x1 = x0 + r * Math.cos(deg*3.14/180);
  var y1 = x0 + r * Math.sin(deg*3.14/180);

  return {'x': x1, 'y': y1};;
}

function drawRingChart(percent) {
  percent = 100 - percent;
  var paperRing = Raphael(document.getElementById("ring-chart"), 140, 140);


  paperRing.image(imgCircleLine, 0, 0, 140, 140);
  paperRing.image(imgCircleStroke, 8, 8, 124, 124);

  var finalX = getLocationByDeg(percent).x;
  var finalY = getLocationByDeg(percent).y;

  //大角度则为1，小角度则为0
  var orientationNum = 0;
  if(percent > 50){
    orientationNum = 1;
  }

  var pPercent = ["M", 70, 15, "A", 55, 55, 0, orientationNum, 0, finalX, finalY];
  paperRing.path().attr({
    'path': pPercent,
    'stroke-width': 14,
    'stroke': '#76c573'
  });

  var finalXOuter = getLocationByDeg(percent, true).x;
  var finalYOuter = getLocationByDeg(percent, true).y;
  var pPercentOuter = ["M", 69, 1, "A", 69, 69, 0, orientationNum, 0, finalXOuter, finalYOuter];
  paperRing.path().attr({
    'path': pPercentOuter,
    'stroke-width': 4,
    'stroke': '#5cbb5c'
  });
}

drawRingChart(30);
</script>
</body>
</html>

希望对您有用~~