Chart.js甜甜圈图内部标签不同于外部

我试图创建一个与其“传说”相比具有不同内部标签的图表。当图例太长时，Chart.js会缩小，从而将图表推向非常小的尺寸。我拿了标签，并在一定长度后切断它们，这是新标签。但是我不知道如何有两个单独的标签，一个是传说是缩短版本，一个是正常长度。这里是我的代码：Chart.js甜甜圈图内部标签不同于外部

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

标签2正确返回完整的字符串，而trunc_labels2正确返回截断的字符串。其他类型的图表有这个功能（即酒吧，线等），但它似乎甜甜圈不？谢谢

来源

2017-08-24 G3TH

所以，你想有标签的传奇和弹出后悬停到图表部分？ – SirWojtek

@SirWojtek我希望图例是被截断的版本，但悬停是完整的标签。即传奇= thisismyreallylon ... tooltop = thisismyreallylongstring – G3TH

@ℊααnd这'不应该'成为一个问题，因为没有一个标签会达到这样的长度。介意告诉我你是如何将这两者分开的？ – G3TH

要截断的标签/串 - 使用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>

来源

2017-08-25 01:04:27

你好，我使用chart.js和创建条形图，我越来越成功。但我正面临一个问题相关的图表，所以你可以帮助我。我有添加过滤器图表像月明智明智的数据显示在图表第一次数据显示月明智然后改变后下拉并选择星期明智的数据显示然后图表创建，但后来我在图表和鼠标指针从从左到右我的图表自动更改并显示月份明智的数据，所以我想停止这个，那么怎么能做任何想法？ – Edit

请不要在评论部分提问，而是发布一个新问题来彻底描述您的问题，以及您迄今尝试解决的问题。 –

是的，我问的帖子请给我一些提示，在这个帖子这是我的帖子id => 45875358所以你能帮我吗？ – Edit

好吧，我想我有一个回答你的问题。你必须secify label回调函数返回应内部工具提示中显示的字符串（弹出）：

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

这里是Plunker一个例子：

https://plnkr.co/edit/fsQu7QNb6PnhnGhgvxR9

来源

2017-08-25 01:14:29 SirWojtek

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

Chart.js甜甜圈图内部标签不同于外部

回答

相关问题