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

Answer 2

Mosh Feu 的回答對我不起作用，因為 Chartist 呈現的< tspan>...</ tspan >內容像一個簡單的字符串，而不像 HTML 代碼。

這個問題給了我一個想法，它包含在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 就在這里。