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甜甜圈圖內部標籤不同於外部

回答

相關問題