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

带有2个Y轴的ExtJS柱形图

3 个答案: