在使用title
应用自定义图例文字时,如何在图表图例中使用HTML标记?
如果我们应用类似title:['Your<b>New</b><br />Label']
之类的内容,那么标签就会以纯文本形式写成。
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data', 'data2'],
data: [{
'name': 'metric one',
'data': 10,
'data2': 2
}, {
'name': 'metric two',
'data': 27,
'data2': 5
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
stacked: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: ['data', 'data2'],
title: ['Your<b>New</b><br />Label']
}]
});
}
});