带有 2 个 Y 轴的 ExtJS 柱形图

发布于 2025-01-06 07:12:53 字数 1240 浏览 0 评论 0原文

我正在尝试绘制一个包含 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'
        }]
    });
});

谢谢

原文

I'm trying to plot a column chart with 2 series and thus 2 Y axis, one in the left side and the other in the right side. But the columns display in the same place, on top of each others and not side by side. Do you have any idea how to fix this ?

Something like that :

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

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟花肆意 2025-01-13 07:12:53

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

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

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

其中

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

data4 是商店中的零值条目。

该解决方案非常有效。 :)

Create a zero value entry into the store and append it to the first and second series items. The number of additions depends on the length of series yField items of the other axes.

For example, creating two series items having yField respectively as below:

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

and

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

where data4 is a zero value entry in the store.

The solution worked perfectly. :)

回复收藏 0 原文

情感失落者 2025-01-13 07:12:53

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

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

我希望您明白这一点。

This will add two columns for the left axis and a third one for the right axis:

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

I hope you get the idea.

回复收藏 0 原文

望她远 2025-01-13 07:12:53

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

AFAIK, you cannot have them side-by-side. The reason is they are not in the same series. When you have two data in same series, they get displayed side-by-side. In your case, you have two series.. one configured to use the left axis and other the right. I suggest you use a different type of chart for one of your series.

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

回复收藏 0 原文

~没有更多了~