extjs - Mark custom chart bar color to legend in EXT JS 5 -
EXTJS 5 I have a problem when using custom legend color in the chart I can apply custom color for chart legend , But I can not apply to that legend's item in EXT JS 4, I can use an override function in the series to control it. Like
getLegendColor: function (index) {var proSpeciality = ["# EFD07B", "# 0082AD"]; Return ProspectiI [Index]; } but it is not available in EXT JS 5.
Sample code.
Ext.create ( 'Ext.Container', 'RenderTo: ext.getBody (), width: 600, height: 400, layout:' fit ', item: {xtype:' Carteshian ',' Store ': Store: {field: [' name ',' value ',' value2 '], data: [{name:' metric one ', value: 10, value 2: 15}, {name:' metric two ' (Name: 'metric four', value: 2, value 2: 15}, {name: 'value'}, value: 7, value 2: 15}, {name: 'metric three', value: 5, value 2: 15} 'Text:' 'numeric', position: 'left', title: {text: 'metric five', value: 27, value 2: 15}]}, axis: [{type: location: 'bottom', title: {text: ' Sample values', fontSize: 15}, field: 'value'}, {type: 'category' sample value ', fontSize: 15}, field:' no M '}], legend: {doc:' top ', style: {stroke:' #ffffff ',' stroke-width ': 2, opacity: 1}, tpl: [' & lt; tpl for = "." & Gt; ',' & lt; div class = "myLegendItem" style = "float: left; margin: 5px; padding: 0px; cursor: pointer;" & gt; ',' & lt; Div class = "" style = "float: left; margin: 2 px; width: 12 px; height: 12 px; BA Ckground: {mark};" & gt; & lt; / div & gt; & lt; div style = "float: left ; "& Gt; {Name} , '& lt; / div & gt;', '& lt; / tpl & gt;'], item selector: '.myLegendItem'}, series : {type: 'once', xField: [ 'name'], yField: [ 'value', 'value1'], stacked wrong, renderer: function (Phantom, records, properties, index, store) {var proSpeciality = [ "# EFD07B", "# 0082AD", "# 00A67B", "# AD1808", "# 520084"]; Viseshtaonkfil = Prosspitliti [Index% proSpeciality.length]; return attributes;}, GetLegendColor: function (Index ) {var proSpeciality = [ "# EFD07B", "# 0082AD"]; return Prospelitiai [index];}}} });
Please tell me that I have to change something.
Thank you in advance
Try using the" color "property in the series:
series: {type: 'bar', color: ['orange', ' Yellow '], ...} example:
Comments
Post a Comment