javascript - EXTJS 5.1 可滚动图表图例

Question

我有一个非常简单的 fiddle 来描述我的问题 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 并设置图例的高度，滚动条可见。

希望这有帮助