try to display htmltag string in extjs pie chart legend text

1
votes

before

enter image description here

after

enter image description here

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

2
javascriptextjschartslegendpie-chart
<test> and <metric three> are not html tags? (w3schools.com/tags/tag_html.asp) What you want to display in Legend should be with purpose. Can you detail that. - AJJ
Which version of Ext js you have? - Gilsha
You want to display < and > in the legend? - AJJ
use extjs 5.0 @Gilsha - AtmiyaDas2014
need to display as it is like : <test> @Jayaprasad - AtmiyaDas2014

2 Answers

0
votes

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

Use &lt; and &gt; to display < and > symbols respectively in the html page.

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

enter image description here

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