Question

我有一个非常简单的小提琴来描述我的问题https://fiddle.sencha.com/#fiddle/ij3。

但总结一下：我在条形图中有4个系列。它们都有一个长名称，因此图例非常大，但图表的宽度不足以渲染整个图例，因此最后一项是部分可见的。我想知道的是，如果有办法：

在图例中显示水平滚动条，以便用户可以滚动查看每个项目

或者

当空间不足时，将项目堆叠在新行上

这里的代码相同：

Ext.define('CustomChart', {
    extend: 'Ext.chart.CartesianChart',

    width: 390,
    height: 400,

    legend: {
        docked: 'bottom'
    },

    store: Ext.create('Ext.data.JsonStore', {
        fields: ['month', 'data1', 'data2', 'data3', 'data4' ],
        data: [
            { month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
            { month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 4 },
            { month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 }
        ]
    }),

    axes: [{
        type: 'numeric',
        position: 'left',
        grid: true,
        fields: ['data1']
    }, {
        type: 'category',
        position: 'bottom',
        grid: true,
        fields: ['month']
    }],

    series: [{
        type: 'bar',
        axis: 'left',
        title: [ 'a long name 1', 'a long name 2', 'a long name 3', 'a long name 4' ],
        xField: 'month',
        yField: [ 'data1', 'data2', 'data3', 'data4' ],
        stacked: true
    }]
});


var chart = Ext.create('CustomChart', {
    renderTo: Ext.getBody()
});


Ext.create('Ext.form.Label', {
    html: '<br/><br/>As you can see, the last item in the legend ("a long name 4"), is not visible due to the chart width.<br/>' +
    'Is it possible to:<br/><br/>' +
    '1 - Display a horizontal scrollbar in the legend so the user can scroll to see every items.<br/>'+
    '   OR<br/>'+
    '2 - Make the items to stack on a new line when there isn\'t enough space.<br/>',
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
});

提前多多感谢！

Answer 1

我刚刚在我的应用程序中查看此问题，并通过将AutoScroll设置为true并设置图例的高度，滚动条可见。

希望这有帮助

EXTJS 5.1可滚动图表图例

1 个答案: