Столбец ExtJS с двумя осями Y - PullRequest
Новая
       27

Столбец ExtJS с двумя осями Y

0 голосов
/ 15 февраля 2012

Я пытаюсь построить столбчатую диаграмму с двумя рядами и, следовательно, с двумя осями Y, одна с левой стороны, а другая с правой стороны. Но столбцы отображаются в одном и том же месте друг над другом, а не рядом. У вас есть идеи, как это исправить?

Примерно так: 

Ext.onReady(function () {
    var chart;


    chart = new Ext.chart.Chart({
        width: 800,
        height: 600,
        animate: true,
        store: store1,
        renderTo: Ext.getBody(),
        shadow: true,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data1'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Number of Hits',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Month of the Year'
        }, {
            type: 'Numeric',
            position: 'right',
            fields: ['data2'],
            title: 'Test'
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            xField: 'name',
            yField: 'data1'
        }, {
            type: 'column',
            axis: 'right',
            xField: 'name',
            yField: 'data2'
        }]
    });
});

Спасибо

Ответы [ 3 ]

2 голосов
/ 26 июля 2012

Создать запись с нулевым значением в магазине и добавить ее к элементам первой и второй серии.Количество дополнений зависит от длины серий yField элементов других осей.

Например, создание двух серийных элементов, имеющих yField соответственно, как показано ниже: 

yField: ['data1', 'data2','data4']

и 

yField: ['data4','data4','data3']

где data4 - запись с нулевым значением в хранилище.

Решение сработало отлично.:)

1 голос
/ 20 ноября 2012

Это добавит два столбца для левой оси и третий столбец для правой оси: 

series: [{
    type: 'column',
    axis: 'left',
    highlight: true,
    label: {
        field: ['data1']
    },
    xField: ‘name’,
    yField: ['data1', 'data2','whateverUndefinedFieldNameYouComeUpWith'] // Use an undefined field
},{
    type: 'column',
    axis: 'right',
    highlight: true,
    label: {
        field: 'data3′
    },
    xField: 'name',
    yField: ['name','name','data3'] // or just use the same field you use for the x axis
}]

Надеюсь, вы поняли идею.

0 голосов
/ 15 февраля 2012

AFAIK, вы не можете иметь их рядом.Причина в том, что они не в одной серии.Когда у вас есть две данные в одной серии, они отображаются рядом друг с другом.В вашем случае у вас есть две серии .. одна настроена на использование левой оси, а другая правой.Я предлагаю вам использовать другой тип диаграммы для одной из ваших серий. 

series: [{
    type: 'line', // Instead of column chart I am using line chart...
    axis: 'left',
    highlight: true,
    xField: 'name',
    yField: 'data1'
}, {
    type: 'column',
    axis: 'right',
    xField: 'name',
    yField: 'data2'
}]
...