EXTJS6.0 饼图图例显示以及百分比显示
学习EXTJS6.0 饼状图报表。也是在自己工作中遇到过的一些问题。不大也不小,总之就是比较烦人的那种。效果图如下
然而在之前我的图例显示始终是这样的,图例部分只有文字没有前面那个框。然而网上大部分都是上图那样的。到后面发现在extjs4.0之后,官方就把报表的样式给单独分出去了。所以在自己页面还需要引用 <link href="Extjs/classic/charts/classic/classic/resources/charts-all.css" rel="stylesheet" />这个文件。加入之后,图例就显示正确。
2.如何在饼图上显示百分比。
var percentchart = Ext.create({
xtype: 'polar',
anchor: '100% 100%',
reference: 'chart',
theme: 'default-gradients',
store: storepercent,
legend: {
docked: 'bottom'
},
interactions: ['rotate'],
series: {
type: 'pie',
angleField: 'count',
showInLegend: true,
label: {
field: ['tName'],
renderer: function (text, sprite, config, rendererData, index) {
var Data = rendererData.store.data.items;
var thisdata = Data[index];
var percent = ((parseFloat(thisdata.get('count') / rendererData.store.sum('count')) * 100.0).toFixed(2))
return text + "-"+percent+"%";
}
},
tooltip: {
trackMouse: true,
renderer: function (tooltip, record, item) {
var value = ((parseFloat(record.get('count') / record.store.sum('count')) * 100.0).toFixed(2));
tooltip.setHtml(record.get('tName') + ': ' + value + '%');
}
},
donut: 0
}
});