Question

我正在使用ExtJS 4绘制一个非常简单的折线图：

Ext.create('Ext.Panel', {
        width:  '100%',
        height: 300,
        hidden: false,
        renderTo: Ext.Element.get('container'),
        layout: 'fit',
        items: {
            xtype: 'chart',
            animate: false,
            store: plots[title]['instances'][instance]['store'],
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['samples'],
                minimum : minimum,
                maximum : maximum,
                grid : true,
                title: plots[title]['yLabel']
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['time'],
                title: plots[title]['xLabel']
            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'time',
                yField: 'samples',
                showMarkers: false,
                style: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    'stroke-width': 3
                },
            }]
        }
    });

问题是x轴上的时间序列很长。结果，标签倾向于重叠。有没有办法只显示一些标签？

我记得这是ExtJS 3的默认行为。

x轴上的系列是从时间戳得出的日期。

Answer 1

首先，width属性必须是数字。 '100％'作为字符串不起作用。这可能与您的问题有关，也可能与此无关。

其次，您可能会发现使用Time axis而不是类别轴更有帮助。类别对于离散值（例如一周中的几天或一年中的几个月）而不是时间值更有效。时间轴具有配置“步骤”，可以让您控制标签的密度。

为了省去您的头痛，请将系列中的“轴”配置定义为数组[“left”，“bottom”]。据我所知，它没有记录，但只定义一个轴意味着另一个轴的边界将无法正确遵守。

ExtJS4在线图中配置轴步

1 个答案: