Можно ли добавить заголовок в чарты?

Question

Я хочу добавить заголовок к диаграмме, как в примере или круговой диаграмме. Я хочу отобразить заголовок под или в верхней части графика. Это возможно? Я искал и не могу найти ничего об этом. если да, то какой совет поделиться? было бы что-то вроде этого

РЕДАКТИРОВАТЬ : я обнаружил, что существует свойство для создания текстовых спрайтов для заголовка или любых меток в пакете 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

Вы можете просто добавить спрайт в корзину.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.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

Просто поместите свой график в панель с нужным названием.

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