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

Extjs Stacked Bar Chart数字轴应该是懒惰的

1 个答案: