我正在使用chartjs&创建包含多个数据集的圆环图。所以我必须展示个人标签和也是传说。
在显示多个数据集的标签时出现了一些问题,因此我使用了来自here的黑客攻击。 但是,我还必须展示传说。我无法正确显示它。
这是我尝试过的小提琴。 https://jsfiddle.net/pyva3fos/
HTML:
<div id="canvas-holder" style="width:100%">
<canvas id="myChart" width="400" height="400" />
</div>
脚本:
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Market ", "J1", "J2","Market","J share"],
datasets: [{
data: [61, 11,27],
backgroundColor: [
'#00205A',
'#97BAFF',
'#D9D9D9'
],
labels: [
'Market Share',
'J1',
'J2'
]
}, {
data: [61, 39],
backgroundColor: [
'#00205A',
'#747474',
],
labels: [
'Market Share ',
'J Share',
],
}, ]
},
options: {
responsive: true,
legend: {
display: true,
position:'bottom'
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
}
});
答案 0 :(得分:1)
使用legendCallback功能创建单独的图例。 https://jsfiddle.net/ztnb3h7y/
HTML:
<div id="canvas-holder" style="width:100%">
<canvas id="myChart" width="400" height="400" />
</div>
<div id="chartjs-legend" style="width:100%;" >
</div>
CSS:
.Mylegend { list-style: none; }
.Mylegend li { float: left; margin-right: 10px; }
.Mylegend span
{ border: 1px solid #ccc; float: left; width: 15px; height: 12px; margin: 2px; }
JS:
function containsObject(obj, list) {
var i;
for (i = 0; i < list.length; i++) {
if (list[i].label == obj.label ) {
return true;
}
}
return false;
}
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Market ", "J1", "J2","Market","J Share"],
datasets: [{
data: [61, 11,27],
backgroundColor: [
'#00205A',
'#97BAFF',
'#D9D9D9',
'#00205A',
'#747474',
],
labels: [
'Market Share',
'J1',
'J2'
]
}, {
data: [61, 39],
backgroundColor: [
'#00205A',
'#747474',
],
labels: [
'Market Share',
'J Share',
],
}, ]
},
options: {
responsive: true,
showAllTooltips: true,
legendCallback: function(chart) {
var text = [];
var legs = [];
for( var j=0; j<chart.data.datasets.length;j++)
{
for (var i = 0; i < chart.data.datasets[j].data.length; i++)
{
var newd = { label: chart.data.datasets[j].labels[i] , color: chart.data.datasets[j].backgroundColor[i] };
if( !containsObject (newd,legs) )
{
legs.push(newd);
}
}
}
text.push('<ul class="Mylegend ' + chart.id + '-legend">');
for( var k =0;k<legs.length;k++)
{
text.push('<li><span style="background-color:' + legs[k].color + '"></span>');
text.push(legs[k].label);
text.push('</li>');
}
text.push('</ul>');
return text.join("");
},
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
}
});
$("#chartjs-legend").html(myChart.generateLegend());