Extjs堆叠条形图数字轴应该是懒惰的

ifsvaxew 于 2023-03-29 发布在其他

关注(0)|答案(2)|浏览(110)

我的条形图有问题。我显示的条形图应该表现得像百分比条形图。它一切正常，除了一个事实，即当我的百分比值为55%时，x轴会达到60%。它会动态调整大小，但是，我希望它总是保持在100。
这里是我的代码

var store = Ext.create('Ext.data.Store', {
    fields: ['process', 'identifikation', 'beurteilung', 'training', 'zusage', 'gewonnen'],
    data: [
        { process: 'Prozess', identifikation: 10, beurteilung: 20, training: 20, zusage: 0, gewonnen: 0 }
    ]
});

var chart = Ext.create('Ext.chart.Chart', {
    width: 500,
    height: 200,
    theme: 'Browser:gradients',
    animate: true,
    shadow: true,
    store: store,
    legend: {
        position: 'top'
    },
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['identifikation', 'beurteilung', 'training', 'zusage', 'gewonnen'],
        title: true,
    }, {
        type: 'Category',
        position: 'left',
        fields: ['process'],
        title: true
    }],
    series: [{
        type: 'bar',
        axis: 'bottom',
        gutter: 80,
        xField: 'process',
        yField: ['identifikation', 'beurteilung', 'training', 'zusage', 'gewonnen'],
        stacked: true
    }]
});

我希望有人能告诉我一个方法，如何设置xaxis的大小
亲切问候

extjs

来源：https://stackoverflow.com/questions/22017989/extjs-stacked-bar-chart-numeric-axes-schould-be-lazy

2条答案

按热度按时间

vxqlmq5t1#

您可以为数值轴设置最小值和最大值，这将强制该轴为这些值。

var chart = Ext.create('Ext.chart.Chart', {
width: 500,
height: 200,
theme: 'Browser:gradients',
animate: true,
shadow: true,
store: store,
legend: {
    position: 'top'
},
axes: [{
    type: 'Numeric',
    minimum: 0,
    maximum: 100, //You need to change this values dynamically if you percentages are more than 100, as with this field it restricts to 100 
    position: 'bottom',
    fields: ['identifikation', 'beurteilung', 'training', 'zusage', 'gewonnen'],
    title: true,
}, {
    type: 'Category',
    position: 'left',
    fields: ['process'],
    title: true
}],
series: [{
    type: 'bar',
    axis: 'bottom',
    gutter: 80,
    xField: 'process',
    yField: ['identifikation', 'beurteilung', 'training', 'zusage', 'gewonnen'],
    stacked: true
}]
});

赞(0）回复(0）举报 2023-03-29

kjthegm62#

如果您正在寻找一个100%堆叠的酒吧，只需更改“堆叠：true”for“fullStack：真”。

赞(0）回复(0）举报 2023-03-29