这是关于版本4.2.2的,我们有一个这样的图表
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'
}
]
});
但是Legend只显示字段名,这并不是很有用。我们需要在这里应用一个自定义值,它应该是静态类型的。但我们找不到这样的方法。有一个showInLegend
属性,但我们找不到legendText
或displayText
prop,它们可能允许我们将名称从data
更改为A much better Name
。
编辑图例中显示更多日期的示例
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'
}
]
});
}
});
2条答案
按热度按时间bqjvbblv1#
可以使用
title
更改图例中的e1d1e。看看我从您的示例代码中创建的小提琴,以供使用。更新:如果您有多个字段,请提供相应标题的
array
。例如:title:['My First Field','My Second Field']
这是一把小提琴,展示了多种标题
kcugc4gi2#
我在渲染器上添加了一个函数,根据我想要显示的对象进行转换。我的值是动态的,基于表单控件来选择稍微不同的情况,但它有效。