Круговая диаграмма чартиста с надписью на следующей строке - PullRequest
Новая
       26

Круговая диаграмма чартиста с надписью на следующей строке

0 голосов
/ 23 декабря 2018

У меня круговая диаграмма с пользовательской меткой и процентом.Issue is Label и процент отображается в одной строке.Мне нужно разбить процент и подписать на две строки.Процент метки

Я пробовал <br> и \n, но не сработало.Пожалуйста, помогите 

var names = ['', 'Home Loans', 'Auto Loans'];

var data = {
  series: [3, 5, 4]
};

var sum = function(a, b) {
  return a + b
};

new Chartist.Pie('.ct-chart', data, {
  labelInterpolationFnc: function(value, idx) {
    var percentage = Math.round(value / data.series.reduce(sum) * 100) + '%';
    return names[idx] + '\n' + percentage;
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script>
<div class="ct-chart"></div>

enter image description here

1 Ответ

0 голосов
/ 23 декабря 2018

Извините, но пока, используя эту библиотеку, это невозможно.

Единственный вариант разбить строку в svg - это разделить ее на tspan s.(См. Как отобразить несколько строк текста в SVG? ).

Чтобы сделать это, чартист должен изменить свой код вызова labelInterpolationFnc: вместо использования text необходимость разрешить html, чтобы вы могли разбить текст самостоятельно.

Что-то вроде: 

labelInterpolationFnc: function(value, idx) {
  var percentage = Math.round(value / data.series.reduce(sum) * 100) + '%';
  return `
    <tspan>${names[idx]}</tspan>
    <tspan>${percentage}</tspan>
  `;
}
...