Geek Answers Handbook

Display other text in legend

It's about version 4.2.2. We have such a diagram.

var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'data'], data: [ { 'name': 'metric one', 'data':10 }, { 'name': 'metric two', 'data':27 } ] }); Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 500, height: 300, animate: true, store: store, legend: { position: 'right' }, axes: [ { type: 'Numeric', position: 'left', fields: ['data'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, title: 'Sample Values', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['name'], title: 'Sample Metrics' } ], series: [ { type: 'column', axis: 'left', highlight: true, tips: { trackMouse: true, width: 140, height: 28, renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); } }, label: { display: 'insideEnd', 'text-anchor': 'middle', field: 'data', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', color: '#333' }, xField: 'name', yField: 'data' } ] });

But Legend only displays the field name, which is not very useful. We need to apply a custom value here, which should be static. But we did not find anything. There is a showInLegend property, but we did not find a legendText or displayText prop that could allow us to change the name, in this case data to A much better Name .

Edit Example with an extra date to display in the legend

 Ext.application({ name : 'Fiddle', launch : function() { var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'data', 'data2'], data: [ { 'name': 'metric one', 'data':10, 'data2':2 }, { 'name': 'metric two', 'data':27, 'data2': 5 } ] }); Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 500, height: 300, animate: true, store: store, legend: { position: 'right' }, axes: [ { type: 'Numeric', position: 'left', fields: ['data','data2'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, title: 'Sample Values', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['name'], title: 'Sample Metrics' } ], series: [ { type: 'column', axis: 'left', highlight: true, stacked: true, tips: { trackMouse: true, width: 140, height: 28, renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); } }, label: { display: 'insideEnd', 'text-anchor': 'middle', field: 'data', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', color: '#333' }, xField: 'name', yField: ['data','data2'], title:'YourNewLabel' } ] }); } });
+6
source share
1 answer

You can use title to change the label in the legend. Check out this script that I created from your sample code to use.

 series: [ { type: 'column', axis: 'left', highlight: true, tips: { trackMouse: true, width: 140, height: 28, renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); } }, label: { display: 'insideEnd', 'text-anchor': 'middle', field: 'data', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', color: '#333' }, xField: 'name', yField: 'data', title:'YourNewLabel' }

Refresh . If you have more than one field, specify an array corresponding headers. For instance:

title:['My First Field','My Second Field']

Here is a script showing several names

+11
source

More articles:


All Articles