我想为图表添加标题，例如在gauge example 或饼图中。我想在图表下方或上方显示标题。这可能吗？我一直在寻找，但找不到任何关于此的信息。如果是这样，有什么建议可以分享吗？ 会是这样的
编辑：我发现有一个属性可以为 Ex.draw 上的标题或任何标签创建 text sprites包。 但我无法理解如何使用它..
这里有人做过吗？
【问题讨论】：
title属性吗？或者这不是你想要的？
title : 'my title'，但没有成功:( cseems that hart doesn't have a title property
标签： extjs label charts title extjs4
我建议不要使用精灵，因为您可能希望标题居中。由于此处其他答案中描述的精灵方法都对位置进行了硬编码，因此不会自动处理对容器大小或文本长度的任何更改。以精灵为中心 可以通过一些努力来完成，但我会考虑利用布局系统。这样，当您的页面调整大小时，您的页面内容可以自动很好地定位。
// Use a vbox layout with whatever options you need
layout: {
type: 'vbox',
align: 'center'
},
items: [{
type: 'container',
html: 'My Title'
},{
type: 'chart',
flex: 1,
// ...etc
}];
【讨论】：
是的，您可以使用Ext.chart.axis.Gauge。在项目内部放置一个带有标题的轴配置：
Ext.create('Ext.chart.Chart', {
default chart settings here
...
items: [{
axes: [
{
position: 'gauge',
type: 'Gauge',
title: 'Net Pips',
maximum: 500,
minimum: 0
}
]
}]
})
【讨论】：
由于 Ext.chart.Chart 是一个 Ext.draw.Component，您可以添加精灵作为它的项目。尝试使用这个：
Ext.create('Ext.chart.Chart', {
default chart settings here
...
items: [{
type : 'text',
text : 'Simple Title',
font : '14px Arial',
width : 100,
height: 30,
x : 50, //the sprite x position
y : 10 //the sprite y position
}]
})
【讨论】：
items 配置属性重命名为 sprites。
您可以简单地将精灵添加到 cart.surface：
var chart = Ext.create('Ext.chart.Chart', {
... default chart settings here ...
});
var sprite = Ext.create('Ext.draw.Sprite', {
type: 'text',
surface: chart.surface,
text: 'Simple text',
font: '12px Arial',
x: 50,
y: 0,
width: 100,
height: 100
});
sprite.show(true);
chart.surface.add(sprite);
希望对你有帮助。
【讨论】：
chart.surface.add(sprite);
只需将图表放在带有所需标题的面板中即可。
Ext.create('Ext.panel.Panel', {
title: 'My Title',
layout: 'fit',
items: yourChart
});
【讨论】：