A custom sector chart with lines and points nested inside

Time:2019-12-30

Design draft:
A custom sector chart with lines and points nested inside

Finally, the effect picture is realized:
A custom sector chart with lines and points nested inside

Don’t say much, just code!

<!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">
  <link rel="stylesheet" href="./css/bodyExam.css">
  < title > body test report < / Title >
</head>
<body>
<div class="body_tu" id="drawing">
    
  </div>
</body>
<script></script>
<script>
Var text_l = ['body weight ',' BMI ',' fat ',' muscle ',' water ',' protein ',' subcutaneous fat ',' visceral fat ',' bone mass', 'basic metabolism', 'body age', 'static heart rate']
  function pieer(text_list, source) {
    var winwidth = window.innerWidth
    Var d_width = winwidth < 375? Winwidth: 375 // Canvas Size
    var viewboxwid = winwidth / 375
    var trasx = (winwidth - 375) / 2
    Var d_hlaf = d_width / 2 // half
    var circle_r = 103
    var line_color = "#F0F0F0"
    var line_num = text_list.length
    var rotate_one = 360 / line_num
    var source = source
    var sourcelength = String(source).length
    Var sourcetext = 'comprehensive score'
    var text_list = text_list
    function fontalign(basefontsize, num) {
      var font_item = basefontsize, font_left = 0, num_length = String(num).length
      if (String(num).indexOf('.') > -1) {
        font_left = (((num_length - 1) * font_item) + 6.67) / 2
      } else {
        font_left = (num_length * font_item) / 2
      }
      return font_left
    }
    function rad(params) {
      return params * Math.PI / 180
    }
    Var draw = SVG ('Drawing '). Size (d'width, d'width) // specify a canvas
    draw.transform({ scale: viewboxwid > 1.2 ? 1.2 : viewboxwid })
    document.getElementById('drawing').style.width = d_width
    Var gradient = draw.gradient ('linear ', function (stop) {// linear gradient
      stop.at(0, '#27867B', 0.5)
      stop.at(1, '#97E7BB', 0.5)
    })
    Gradient. From (0, 1). To (0.5, 0) // gradient position changes

    Var panel = draw.gradient ('linear ', function (stop) {// linear gradient
      stop.at(0, '#69CAB7', 0.4)
      stop.at(1, '#0C4691', 0.05)
    })
    Panel. From (0, 1). To (0.5, 0) // gradient position changes

    Var group = draw. Group() // create a group
    Var circle = group. Circle (circle_r * 2). Attr ({// outer line big circle
      cx: d_hlaf,
      cy: d_hlaf,
      fill: '#FFFFFF',
      stroke: line_color,
      'stroke-width': 1
    })
    console.log(line_num)
    For (VaR I = 0; I < line \ num; I + +) {// external text and spider web
      group.line(d_hlaf, d_hlaf - circle_r, d_hlaf, d_hlaf + circle_r).stroke({ width: 1, color: line_color }).transform({ rotation: rotate_one * i })
      //Group. Text ('weight '). Rotate (rotate one * I, d'hlaf, d'hlaf)
      var fontitem = text_list[i]
      Var x i = d_hlaf + (circle_r + 30) * math.cos (RAD (I * rotate_one - 90)) // calculate the coordinate X of each text
      Var y i = d_hlaf + (circle_r + 30) * math.sin (RAD (I * rotate_one - 90)) // calculate the coordinate y of each text
      group.text(fontitem).transform({
        x: xi - fontalign(12, fontitem),
        y: yi - 9
      }).font({
        size: 12,
        anchor: 'start',
      })
    }
    var group1 = draw.group()
    Group1. Circle ((circle_r - 28) * 2). Attr ({// middle ring
      cx: d_hlaf,
      cy: d_hlaf,
      fill: 'transparent',
      stroke: gradient,
      'stroke-width': 20,
    })
    var linec = ''
    var linearr = []
    For (VaR I = 0; I < line \ num; I + +) {// trace point
      // circle_r = 100% , ((circle_r - 10) / 2) = 0%
      Var min = ((circle_r - 10) / 2) // min
      var r = Math.floor(Math.random() * (circle_r - min + 1) + min)
      Var mindlemin = (circle_r - min) / 3 // normal minimum = mindlemin + min
      Var mindlemax = (mindlemin * 2) + min // normal maximum
      var color = '#1AB394'
      if (r < (mindleMin + min)) {
        color = '#7AB8CF'
      } else if (r <= mindleMax) {
        color = '#1AB394'
      } else {
        color = '#F8AC59'
      }
      Var x i = D ﹣ hlaf + (R) * math.cos (RAD (I * rotate ﹣ one - 90)) // calculate the coordinate X of each point
      Var y i = d_hlaf + (R) * math.sin (RAD (I * rotate_one - 90)) // calculate the coordinate y of each point
      Var x = d_hlaf + min * math. Cos (RAD (I * rotate_one - 90)) // calculate the starting coordinate X of each point
      Var y = d_hlaf + min * math. Sin (RAD (I * rotate_one - 90)) // calculate the starting coordinate y of each point
      Group. Circle (5). Attr ({// outer line big circle
        cx: xi,
        cy: yi,
        fill: color
      })
      linec = linec + x + ',' + y + ' '
      linearr.push([xi, yi])
    }
    Var polygon = group. Polygon (linec). Fill (panel) // draw a polyline
    polygon.animate(800).plot(linearr)
    var group3 = draw.group()
    group3.circle(circle_r - 10).attr({
      cx: d_hlaf,
      cy: d_hlaf,
      fill: '#ffffff',
      stroke: line_color,
      'stroke-width': 1,
    })

    var _left = fontalign(13.39, source)
    var soure = group3.text(function (add) {
      add.tspan(source).newLine().dx(0).fill('#1AB394')
    }).transform({
      x: d_hlaf - _left,
      y: d_hlaf - 44
    })
    soure.font({
      family: 'dincondensed-bold',
      size: 36,
      anchor: 'start',
      // leading: '1.5em'
    })

    var font_left = fontalign(11, sourcetext)
    var font = group3.text(function (add) {
      add.tspan(sourcetext).newLine().dx(0).fill('#333333')
    }).transform({
      x: d_hlaf - font_left,
      y: d_hlaf + 10
    })
    font.font({
      size: 12,
      anchor: 'start',
      // leading: '1.5em'
    })
  }
  pieer(text_l, 23.6)
</script>
</html>

Copy and paste directly to see the effect.
This figure examines various uses of SVG, including drawing circles, circles, points, polylines, polygons, horizontally centered text, and trigonometric functions to calculate coordinates. In terms of mobile phone adaptation, SVG’s viewbox is used directly. Because SVG is a vector graphics, no matter how large or small it is, it will not be distorted, so it can be used in a variety of devices and display outstanding results.
The company’s design is 375 width, so I used 375. You can also set the value of D width to the screen width directly.
Please let me know if there is a bug.

Recommended Today

The first Python Programming challenge on the Internet (end)

Date of establishment: March 28, 2020Update Date: April 22, 2020 (end)Personal collection Tool.pywebsite:http://www.pythonchallenge.com/Note: please quote or change this article at will, just mark the source and the author. The author does not guarantee that the content is absolutely correct. Please be responsible for any consequences Title: the first Python Programming challenge on the web Find […]