Extjs堆積的條形圖數字軸應該懶惰

Question

我的條形圖有問題。 我正在顯示條形圖，其行為應類似於百分比條形圖。 除了事實，當我的百分比值為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的大小

親切的問候

Answer 1

您可以為數字軸設置最小值和最大值，這將強制該軸為這些值。

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