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

Question

之前

后

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

Answer 1

使用< and > < and > 分别在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在显示字符时所做的就是，ExtJS在store-> data部分的'name'属性中获取值，并将其嵌入到HTML span标签中，如下所示：

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

看这里

您可能还想看看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
});