尝试在extjs饼图图例文本中显示htmltag字符串

Question

before

after

my code link (for refrence): https://fiddle.sencha.com/#fiddle/d32

Answer 1

Use < and > < and > to display < and > symbols respectively in the html page.

 var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [{
            'name': '<test>',
            'data': 10
        }, {
            'name': 'metric two',
            'data': 7
        }, {
            'name': '<metric three>',
            'data': 5
        }, {
            'name': 'metric four',
            'data': 2
        }, {
            'name': 'metric five',
            'data': 27
        }]
    });

This is simple HTML fix. ExtJS does not have anything to do with this. What ExtJS does in displaying the lengend is, ExtJS takes the value in the 'name' attribute of the store-->data part and embeds it to the HTML span tag as,

['<div class="', Ext.baseCSSPrefix, 'legend-container">', '<tpl for=".">', '<div class="', Ext.baseCSSPrefix, 'legend-item">', '<span ', 'class="', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ', 'style="background:{mark};">', '</span>{name}', '</div>', '</tpl>', '</div>']

see here

You might also want to take a look over entity characters in html

Answer 2

You will have to do html encoding of data before binding it to the store. Try this.

var holdData = [{
    'name': '<test>',
    'data': 10
 }, {
    'name': 'metric two',
    'data': 7
 }, {
   'name': '<metric three>',
   'data': 5
 }, {
   'name': 'metric four',
   'data': 2
 }, {
   'name': 'metric five',
   'data': 27
}];

holdData.map(function(d){ d.name=Ext.util.Format.htmlEncode(d.name); return d; });

var store = Ext.create('Ext.data.JsonStore', {
   fields: ['name', 'data'],
   data: holdData
});