Chartist 饼图，下一行需要标签答案

【问题标题】：Chartist pie chart with label need on next lineChartist 饼图，下一行需要标签
【发布时间】：2018-12-23 16:30:47
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html css chartist.js

【解决方案1】：

对不起，但目前，使用这个库是不可能的。

在 svg 中换行的唯一选择是将其拆分为tspans。
（见How to display multiple lines of text in SVG?）。

为此，chartist 必须更改他们的 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>
  `;
}

【讨论】：

对不起，我可能不够清楚。目前，这是不可能的：To do this, chartist have to change their code of labelInterpolationFnc call

【解决方案2】：

Mosh Feu 的回答对我不起作用，因为 Chartist 将 < tspan>...</ tspan > 内容呈现为简单的字符串，而不是 HTML 代码。

This issue 给了我一个想法，它包含在draw 事件处理程序中：

.on('draw', function(data) {

    if (data.type === 'label') {
        let textHtml = ['<p>', data.text, '</p>'].join('');

        let multilineText = Chartist.Svg('svg').foreignObject(
            textHtml,
            {
                style: 'overflow: visible;',
                x: data.x - 30,
                y: data.y - 50,
                width: 130,
                height: 20
            },
            'ct-label'
        );
        data.element.replace(multilineText);
    }

Codepen for your case is here.

【讨论】：