甜甜圈图中的标签太长

Question

我尝试在chart.js库中显示Doughnut Chart。

这是我正在使用的代码：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['long long long long long long title', 'title', 'title', 'title', 'title'],
            datasets: [{
                data: [54,36,12,4,20],
                backgroundColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
                ],
            }]
        },
        options: {
          legend: {
              display: true,
              position: 'bottom',
              labels: {
                  fontColor: 'rgb(0, 0, 0)',
                  fontFamily: 'Open Sans',
                  fontSize: 16,
                  fullWidth: true,
                  padding:15
                }
              }
        }
});

我有一个问题，对于特定的页面宽度long long ... long title无法正确显示。

在某些情况下，它看起来像这样：

有什么办法可以使长标签显示为多行而不是离开框吗？

这里是jsfiddle https://jsfiddle.net/9fc5evjk/

Answer 1

chart.js不支持“开箱即用”。您将需要确定哪种解决方案最适合您，然后自己实施。您将需要为myChart的实例化提供修改后的字符串。

您可以在X个字符后自动截断标题，也可以在结尾处加一个“ ...”，以便在缩短标题时变得明显。