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>
  `;
}

Answer 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.

带有标签需要的宪章派饼图在下一行

2 个答案: