具有2个Y轴的ExtJS柱形图

Question

我正在尝试绘制一个包含2个系列的列图，也就是2个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'
        }]
    });
});

谢谢

Answer 1

在商店中创建一个零值条目，并将其附加到第一和第二系列项目。 加法数取决于其他轴的yField系列项目的长度。

例如，创建两个分别具有yField的系列项目，如下所示：

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

和

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

其中data4是商店中的零值条目。

该解决方案运行完美。 :)

Answer 2

这将为左轴添加两列，为右轴添加第三列：

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

希望您能明白。

Answer 3

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'
}]