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

【问题标题】：try to display htmltag string in extjs pie chart legend text尝试在 extjs 饼图图例文本中显示 htmltag 字符串
【发布时间】：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

标签： javascript extjs charts legend pie-chart

【解决方案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】：

使用&lt; and &gt;在html页面中分别显示符号。

 var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [{
            'name': '&lt;test&gt;',
            'data': 10
        }, {
            'name': 'metric two',
            'data': 7
        }, {
            'name': '&lt;metric three&gt;',
            '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

【讨论】：