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

Question

之前

后

我的代码链接（用于参考）： https://fiddle.sencha.com/#fiddle/d32

Answer 1

使用< and >显示＆lt;和＆gt;符号分别在html页面中。

 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
        }]
    });

这是简单的HTML修复。 ExtJS与此无关。 ExtJS在显示lengend时所做的是，ExtJS采用＆＃39; name＆＃39;中的值。商店的属性 - ＆gt;数据部分并将其嵌入到HTML范围标记中，

['<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

您可能还想查看entity characters in html

Answer 2

在将数据绑定到商店之前，您必须对数据进行html编码。试试这个。

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
});