Как рассчитать координаты X и Y в dataLabels, если у нас есть значение данных, является динамическим

Question

Как рассчитать координаты X и Y для dataLabels, если у нас есть значение данных, является динамическим.Вот мой JSfiddle https://jsfiddle.net/BlackLabel/ay5mbfew/

{
          name: 'Incorrect',
          legendColor: 'green',
          dataLabels: {
              enabled: true,
              zIndex: 3,
              y: -150,
              x: 90,
              borderWidth: 0,
              overflow: 'allow',
              style: {
                  fontSize: 60
              }
          },
          data: [{
              color: 'green',
              radius: '112%',
              innerRadius: '65%',
              y: 40
          }]
  }]

, если значение изменено, то как рассчитать координаты x, y на основе значения, чтобы текст отображался на столбцах соответственно

Спасибо

Answer 1

Этот вид графиков может быть сделан более простым способом.Вместо использования сложных путей я использую круги с stroke-dasharray и stroke-dashoffset.

Я делаю это без использования Highcharts - вам может не понравиться это

Также я бы посоветовалудалите округлость линий, так как это может вызвать путаницу.В моем коде, если вы хотите удалить округлость, вы должны удалить это из CSS: stroke-linecap: round;

Пожалуйста, прочитайте комментарии в моем коде.

var SVG_NS = 'http://www.w3.org/2000/svg';
let r = bg.getAttribute("r");//the radius of the chart

let items = [ {val:.17,color:"red"}, {val:.35,color:"hotpink"}, {val:.25,color:"gold"}, {val:.12,color:"skyblue"} ];//<--- change this

// the total length of the circle
let totalLength = bg.getTotalLength()


for(let i = items.length-1; i >=0 ; i--){
//the previous item in the array
  let prev = getPrev(i);
  // for every item in the items array calculate the value for the stroke-dasharray, stroke-dashoffset
  let o = {
  r:r,
  "stroke-dasharray":totalLength,
  "stroke-dashoffset": totalLength, 
  "style":  `--sdo:${totalLength * (1 - items[i].val)}`,
  stroke:items[i].color,
  transform: `rotate(${prev * 360})`,
  class:"animatable"
}
//draw the circles
drawSVGelmt(o,"circle", circles)
 // calculate the position for the text
 // first get the angle in the middle
 let textAngle = 2*Math.PI * (prev + items[i].val/2);
 // get the position and rotate the text 
 let t = {}
   t.x=r*Math.cos(textAngle);
   t.y=r*Math.sin(textAngle);
   t.transform= `rotate(${90},${t.x},${t.y})`

 //draw the text
 let _text = drawSVGelmt(t,"text", text);
 // add the text content
 _text.textContent = `${items[i].val * 100}%`;   
}


// a function to draw an svg element
function drawSVGelmt(o,tag, parent) {
  var elmt = document.createElementNS(SVG_NS, tag);
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

// a function to get the previous item in the array
function getPrev(i){
  let prev = 0;
  if(i > 0){
     for(let j = 0; j < i; j++){
       prev += items[j].val
     }
  } 
  return prev;
}

svg {
  border: 1px solid;
  transform: rotate(-90deg);
}

circle {
  fill: none;
  stroke-width: 60;
  stroke-linecap: round;
}

circle.animatable {
  animation: dash 0.5s ease-in forwards;
}
text {
  fill: black;
  stroke: white;
  paint-order: stroke;
  stroke-width: 5;
  font-size: 50px;
  font-family: arial;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
}

@keyframes dash {
  to {
    stroke-dashoffset: var(--sdo);
  }
}

<svg id="svg" width="400" viewBox="-200 -200 400 400">
  
  <circle id="bg" r="150" stroke="#d9d9d9" />
  <g id="circles"></g>
  
  <g id="text"></g>
</svg>