1

Как рассчитать координаты 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, чтобы текст отображался соответственно на столбцах.

Свободный перевод вопроса How to calculate X and Y coordinate under dataLabels with we have data value is dynamic от участника @Mohit.

1

1 ответ 1

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 радиус chart

let items = [ {val:.17,color:"red"}, {val:.35,color:"hotpink"}, {val:.25,color:"gold"}, {val:.12,color:"skyblue"} ];//<--- меняем цвет

// максимальная длина круга
let totalLength = bg.getTotalLength()


for(let i = items.length-1; i >=0 ; i--){
//предыдущий элемент в массиве
  let prev = getPrev(i);
  // для каждого элемента в массиве  вычислить значение для 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"
}
//рисуем круг
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);
 // получаем позицию и поворачиваем текст 
 let t = {}
   t.x=r*Math.cos(textAngle);
   t.y=r*Math.sin(textAngle);
   t.transform= `rotate(${90},${t.x},${t.y})`

 //рисуем текст
 let _text = drawSVGelmt(t,"text", text);
 // add the text content
 _text.textContent = `${items[i].val * 100}%`;   
}


// функция для рисования элемента SVG
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;
}

// функция для получения предыдущего элемента в массиве
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>

Свободный перевод ответа How to calculate X and Y coordinate under dataLabels with we have data value is dynamic от участника @enxaneta.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.