Question

我想在图表中添加标题，例如gauge example或饼图。我想在图表下方或顶部显示标题。这可能吗？我一直在寻找，也找不到任何关于此事的信息。如果是这样，任何提示要分享？它就像这个 gauge with titles

编辑：我发现有一个属性可以为 Ex.draw上的标题或任何标签创建文本精灵封装即可。但我无法理解如何使用它..

anybdy在这里做了同样的事情吗？

Answer 1

由于Ext.chart.Chart是一个Ext.draw.Component，你可以添加sprite作为它的项目。试着用这个：

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

只需将图表放在具有所需标题的面板中即可。

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

Answer 4

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

Answer 5

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

Timer1: <div id="time1"></div> Timer2: <div id="time2"></div> Timer3: <div id="time3"></div> Timer4: <div id="time4"></div> <button id="pause1">Pause 1</button> <button id="pause2">Pause 2</button> <button id="pause3">Pause 3</button> <button id="pause4">Pause 4</button> </br> <button id="resume1">Resume 1</button> <button id="resume2">Resume 2</button> <button id="resume3">Resume 3</button> <button id="resume4">Resume 4</button> </br> <button id="start1">Start 1</button> <button id="start2">Start 2</button> <button id="start3">Start 3</button> <button id="start4">Start 4</button> </br> <button id="stop1">Stop 1</button> <button id="stop2">Stop 2</button> <button id="stop3">Stop 3</button> <button id="stop4">Stop 4</button>

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

5 个答案: