Как установить размер шрифта и положение y текста для выравнивания с полосами на сплошной диаграмме? - PullRequest
Новая
       22

Как установить размер шрифта и положение y текста для выравнивания с полосами на сплошной диаграмме?

0 голосов
/ 26 октября 2018

Кодовая ссылка: https://codepen.io/ariff20/pen/WaKJRV

Пример данных: https://api.myjson.com/bins/9ene2

Я нашел способ для полос динамически изменять свой радиус и внутренний радиус на основе данных и подгонки, а также множества возможных полос. 

var x = 100
var bands = mappedData.reduce(function (acc, d, idx) {
      if (idx != 0) {
        x = x - 100 / mappedData.length
      }
      acc.push({
        color: "#eee",
        startValue: 0,
        endValue: maxValue,
        radius: x + "%",
        innerRadius: x - 15 + "%"
      });
      acc.push({
        color: colors[idx % colors.length],
        startValue: 0,
        endValue: d.value,
        radius: x + "%",
        innerRadius: x - 15 + "%",
        balloonText: d.value
      });
      return acc;
    }, []);

Однако для текста и размера шрифта я действительно изо всех сил стараюсь выровнять каждую строку текста, чтобы выровнять по центру каждой полосы с правильным размером шрифта. Вот мой код для меток: 

var dataLength = 50 / mappedData.length;
    var y = 0;
    var labels = mappedData.map(function (d, idx) {
      y = y + dataLength;
      return {
        text: d.name,
        x: "49%",
        y: (y / 2) + "%",
        size: 15,
        bold: true,
        color: colors[idx % colors.length],
        align: "right"
      };
    });
  }

enter image description here

Еще одним важным примечанием является то, что метки должны заканчиваться в центре диаграммы независимо от их количества. Также важно изменить размер шрифта в соответствии с данными. Есть идеи, как этого добиться?

...