I want to display the radar chart in inline SVG.

I put the following code in the html file, but the radar chart is not displayed.Could you please let me know if you know the cause?

Code Source: Create a radar chart using "Inline SVG" -- Kathry Technology Blog

<head>
<style>
# svg_container{
width —600px;
height —450px;
margin —auto;
}
# chart_container{
width —500px;
height —500px;
display:block;
margin —auto;
}

# chart_foundation_pentagons{
fill: none;
stroke : #7ac5e9;
stroke-width:1px;
stroke-dasharray:3px;
}
</style>
</head>

<body>

<div class="svg_container">
<svgid="chart_container">
<gid="chart_foundation_pentagons">/g>
<gid="chart_Polygon">/g>
<gid="marker_points_wrap">/g>
</svg>
</div>

<script>
// Generate pentagon
function createPentagons(dis){
 // Generate a polygon element
 var Pentagon= document.createElementNS("http://www.w3.org/2000/svg", "polygon");
 var pentagonPoints="";
 for(vari=0;i<5;i++){
　varx=Math.cos((72*i)-90)*Math.PI/180)*dis;
　variable=Math.sin((72*i)-90)*Math.PI/180)*dis;
　pentagonPoints+=(x+250)+", "+(y+220)+"";
}
 allPentagonPoints.push(pentagonPoints);
 // Set coordinates
 Pentagon.setAttribute("points", pentagonPoints);
 return Pentagon;
}
 
// Lay the foundation for the radar chart.Show generated pentagon
function drawChartFoundation() {
 // Make a pentagon for each distance from the center
 var distance = [1,50,100,150,200];
 for (vari=0;i<distance.length;i++){
  document.getElementById("chart_foundation_pentagons").appendChild(createPentagons(distance[i])));
 }
}
</script>

</body>

javascript html svg

2022-09-30 19:34

1 Answers

The root cause is that it defines a JavaScript function but does not state when it will run.Depending on what you want to do, for example, use the window.onload event, so see the JavaScript tutorial for more information.In the article from which I quoted, I draw it after the DOM has finished loading (I use jQuery).

//Generate pentagon
function createPentagons(dis){
  // Generating a Polygon Element
  var Pentagon= document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  var pentagonPoints="";
  for(vari=0;i<5;i++){
    varx=Math.cos((72*i)-90)*Math.PI/180)*dis;
    variable=Math.sin((72*i)-90)*Math.PI/180)*dis;
    pentagonPoints+=(x+250)+", "+(y+220)+"";
  }
  // Set coordinates
  Pentagon.setAttribute("points", pentagonPoints);
  return Pentagon;
}
 
// lay the groundwork for the radar chart.Show generated pentagon
function drawChartFoundation() {
  // form a pentagon at every distance from the center
  var distance = [1,50,100,150,200];
  for (vari=0;i<distance.length;i++){
    document.getElementById("chart_foundation_pentagons").appendChild(createPentagons(distance[i])));
  }
}

window.onload=drawChartFoundation;

#svg_container{
    width —600px;
    height —450px;
    margin —auto;
}

# chart_container{
    width —500px;
    height —500px;
    display:block;
    margin —auto;
}

# chart_foundation_pentagons{
    fill: none;
    stroke : #7ac5e9;
    stroke-width:1px;
    stroke-dasharray:3px;
}

<div class="svg_container">
<svgid="chart_container">
  <gid="chart_foundation_pentagons">/g>
  <gid="chart_Polygon">/g>
  <gid="marker_points_wrap">/g>
</svg>
</div>

2022-09-30 19:34

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656