我使用chartsjs 創(chuàng)建了這個(gè)餅圖。到目前為止,如果您運(yùn)行該代碼段,我可以通過以下方式顯示我的標(biāo)簽:Uno\Company 119(56%)但是,我想在下面顯示公司文本,以便它可以像這樣顯示: Uno Company1 19 (56%)我嘗試創(chuàng)建一個(gè)單獨(dú)的數(shù)組:label2: ["Company1", "Company2", "Company3"]然后在回調(diào)中,我添加了一個(gè)新函數(shù),我認(rèn)為它會(huì)給我下面的另一個(gè)標(biāo)簽,但沒有運(yùn)氣。這是我用于此的代碼:title2: function(tooltipItem, data, label2){ return data['label2'][tooltipItem[0]['index']]}誰能幫我嗎?var ctx = document.getElementById("myChart");var myChart = new Chart(ctx, { type: 'doughnut', data: { label1: ["Uno\\Company1", "Dos\\Company2", "Tres\\Company3"], datasets: [{ label: '# of Votes', data: [12, 19, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }, options: { tooltips: { callbacks: { title: function(tooltipItem, data, label1, label2) { return data ['label1'][tooltipItem[0]['index']]; }, label: function(tooltipItem, data) { return data['datasets'][0]['data'][tooltipItem['index']]; }, afterLabel: function(tooltipItem, data) { var dataset = data['datasets'][0]; var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100) return '(' + percent + '%)'; } }, backgroundColor: '#FFF', titleFontSize: 16, titleFontColor: '#0066ff', bodyFontColor: '#000', bodyFontSize: 14, displayColors: false } }});<div> <canvas id="myChart" height="100"></canvas> <div id="chartjs-tooltip"> <table></table> </div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
嘗試在 ChartsJS 中為餅圖插入另一個(gè)標(biāo)簽
忽然笑
2022-05-22 16:04:48