javascript - Chartist 饼图，下一行需要标签

Question

我有带有自定义标签和百分比的饼图。问题是标签和百分比出现在同一行中。我需要将百分比和标签分成两行。标签百分比

我试过了<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>

Answer 1

抱歉，但是目前，使用这个库是不可能的。

在 svg 中打断一行的唯一选择是将其拆分为 tspan。
(参见 How to display multiple lines of text in 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>
  `;
}