是否可以为图表添加标题？

Question

我想向图表添加标题，例如 仪表示例或饼图。我想在图表下方或上方显示标题。这可能吗？我一直在寻找，但找不到任何与此相关的信息。如果是这样，有什么建议可以分享吗？ 它会是这样的

编辑： i发现有一个属性可以为 Ex.draw 包 中的标题或任何标签创建文本精灵。 但我不明白如何使用它..

这里有人做过同样的事情吗？

Answer 1

由于 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
   }]
})

Answer 2

您可以简单地将精灵添加到 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);

希望它有帮助。

Answer 3

我建议不要使用精灵，因为您可能希望标题居中。对容器大小或文本长度的任何更改都不会自动处理，因为此处其他答案中描述的精灵方法都对位置进行了硬编码。使用精灵居中可以通过一些努力来完成，但我会考虑利用布局系统。这样，当您调整页面大小时，您的页面内容可以自动正确定位。

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

Answer 4

只需将您的图表放入带有您需要的标题的面板中即可。

Ext.create('Ext.panel.Panel', {
    title: 'My Title',
    layout: 'fit',
    items: yourChart
});

Answer 5

是的，您可以使用 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
                    }
                ]
   }]
})