Chart.js 圆环图内部标签与外部标签不同答案

【问题标题】：Chart.js Doughnut chart inner label different than outerChart.js 圆环图内部标签与外部标签不同
【发布时间】：2017-08-24 23:34:15
【问题描述】：

我正在尝试创建一个与其“图例”相比具有不同内部标签的图表。当图例太长时 Chart.js 会缩小，这会将我的图表推到非常小的尺寸。我拿起标签，在一定长度后将它们切掉，这就是新标签。但是我不知道如何有两个单独的标签，一个是 Legend 是缩短版本，一个是正常长度。这是我的代码：

function truncLabel(str, maxwidth){
if(str.length > maxwidth) {
    str = str.substring(0,24)+"...";
}
return str;
}

for (var i = 0 ; i < labels2Length; i++){
        trunc_labels2[i] = formatLabel(labels2[i],20);
    }


    new Chart(document.getElementById("xxx"), {
        type: 'doughnut',
        data: {
            labels: trunc_labels2,
        datasets: [
            {
            label: labels2,
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#5e5ba3","#9fe7aa","#1a5ba3","#6cba1f","#cacf4f"],
            data:data2
        }
        ]} //More code follows but isnt needed here

Labels2 正确返回完整字符串，而 trunc_labels2 正确返回截断字符串。其他类型的图表具有此功能（即条形图、线形图等），但甜甜圈似乎没有？谢谢

【问题讨论】：

所以您想在图例中添加标签并在悬停到图表部分后弹出？
@SirWojtek 我希望图例是截断版本，但悬停在完整标签上。即图例 = thisismyreallylon... tooltop = thisismyreallylongstring
@ℊααnd 这“不应该”成为一个问题，因为没有一个标签会达到那个长度。介意告诉我你是如何将两者分开的吗？

标签： javascript charts chart.js pie-chart

【解决方案1】：

要截断标签/字符串 - 使用 map() 方法和 substring()，例如：

let labels = [
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet'
];
let trunc_labels = labels.map(e => e.substring(0, 12) + '...');

现在，要在工具提示上显示原始标签，请使用以下工具提示的标签回调函数：

callbacks: {
   label(t, d) {
      let xLabel = labels[t.index],
          yLabel = d.datasets[t.datasetIndex].data[t.index];
      return xLabel + ': ' + yLabel;
   }
}

^{* 确保 labels 是一个全局变量。}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

let labels = [
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet'
];
let trunc_labels = labels.map(e => e.substring(0, 12) + '...');

let chart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      labels: trunc_labels,
      datasets: [{
         data: [1, 1, 1],
         backgroundColor: [
            'rgba(0, 119, 220, 0.8)',
            'rgba(0, 119, 220, 0.6)',
            'rgba(0, 119, 220, 0.4)'
         ]
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label(t, d) {
               let xLabel = labels[t.index],
                   yLabel = d.datasets[t.datasetIndex].data[t.index];
               return xLabel + ': ' + yLabel;
            }
         }
      }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

【讨论】：

您好，我正在使用 chart.js 并创建条形图，我正在成功。但我正面临一个与图表相关的问题，所以请你帮帮我。我在图表中添加了过滤器，例如按月按周数据在图表中显示第一次数据按月显示，然后在更改下拉菜单并选择按周数据显示然后创建图表，然后在我继续图表和鼠标指针从从左到右我的图表会自动更改并显示月份数据，所以我想停止这个，所以怎么做？
请不要在评论部分提问，而是发布一个新问题来彻底描述您的问题以及您迄今为止为解决该问题所做的尝试。
是的，我在问帖子，请给我一些关于那个帖子的提示这是我的帖子 ID => 45875358 所以你能帮帮我吗？
@ℊααnd 非常感谢这个答案。不得不调整一堆但最终让它工作（尽管图表呈现在其容器之外）。谢谢！

【解决方案2】：

好的，我想我已经回答了你的问题。您必须指定 label 回调函数返回一个应在工具提示（弹出窗口）中显示的字符串：

     options: {
        tooltips: {
          callbacks: {
          label: function (item, data) {
            return 'my custom label text';
          }
        }
     }

这是 Plunker 的示例：

https://plnkr.co/edit/fsQu7QNb6PnhnGhgvxR9

【讨论】：

谢谢你。我给出了上面那个的答案，因为它更充实，但这个例子有帮助。