我使用Chartsjs创建了此饼图。到目前为止,如果您运行该代码段,则可以通过以下方式显示我的标签:
Uno\Company 1
19
(56%)
但是,我希望在下面显示公司文本,以便可以这样显示:
Uno
Company1
19
(56%)
我尝试创建一个单独的数组:label2:[“ Company1”,“ Company2”,“ Company3”]
然后在回调中,我添加了一个新函数,我认为该函数会给我下面的其他标签,但没有运气。这是我用于此的代码:
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>
只需将label1
从字符串数组更改为数组数组:
label1: [["Uno", "Company1"], ["Dos", "Company2"], ["Tres", "Company3"]]