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

Posted 2023-02-16

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

【英文标题】：try to display htmltag string in extjs pie chart legend text

【发布时间】：2015-01-06 16:14:02

【问题描述】：

之前

之后

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

【问题讨论】：

和 不是html标签吗？ (w3schools.com/tags/tag_html.asp) 你想在 Legend 中显示的内容应该是有目的的。你能详细说明一下吗？

你有哪个版本的Ext js？

您想在图例中显示 ？

使用 extjs 5.0 @Gilsha

需要按原样显示： @Jayaprasad

【参考方案1】：

在将数据绑定到商店之前，您必须对数据进行 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
);

【参考方案2】：

使用< 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 在显示 lengend 时所做的是，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>']

see here

您可能还想看看entity characters in html