Question

注意：这是一篇交叉帖子：extjsForum

因为我在那里没有回答，所以我在这里问。

任何决定回复此帖子的人都可以先查看该论坛，以确定问题是否已得到回答。：）

以下是我的核心代码，使柱形图显示我的网站的访问者和字节，但是我发现我无法处理xAxis的标签。

        visitAndBytesStore = new Ext.data.JsonStore(
        {
            fields :
            [
            {
                name : 'time',
                type : 'string'
//             dateFormat : 'Y-m-d H:i:s'
                    }, 'visits', 'bytes' ]
        });


        var visitAndBytesData =
        [{"time" : "2010-09-17 16:24:06","visits" : "23","bytes" : "4545"},
        {"time" : "2010-09-17 02:23:33","visits" : "3233","bytes" : "3232"},
        {"time" : "2010-09-17 16:23:52","visits" : "456","bytes" : "3242342"},
        {"time" : "2010-09-17 15:23:52","visits" : "6456","bytes" : "2314252"} ];


        visitAndByteChart = new Ext.chart.ColumnChart(
        {
            store : visitAndBytesStore,
            xField : 'time',
            // xAxis : new Ext.chart.TimeAxis(
            // {
            // title : 'time',
            // displayName : 'time',
            // labelRenderer : function(dd)
            // {
            // // return dd.format("m-d")+"\n"+dd.format("H:i");
            // return "";
            // }
            // }),
            yAxis : new Ext.chart.NumericAxis(
            {
                displayName : 'Visits',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            series :
            [
            {
                type : 'column',
                displayName : 'Bytes',
                yField : 'bytes',
                style :
                {
                    color : 0x99BBE8
                }
            },
            {
                type : 'line',
                displayName : 'Visits',
                yField : 'visits',
                style :
                {
                    mode : 'stretch',
                    color : 0x15428B
                }
            } ]
        });

        visitorAndBytesChartPanel = new Ext.Panel(
        {
            iconCls : 'chart',
            title : '&nbsp',
            frame : true,
            renderTo : 'bytes',
            autoWidth : true,
            height : 300,
            layout : 'fit',
            items : visitAndByteChart

        });

如上图所示，如果我使用“时间”字段的“字符串”格式，我无法处理图表中时间标签的格式，它们的值太长（2010-09-20 23:00： 00太长了），因此它们会自动选择显示。

这是结果： http://awesomescreenshot.com/0e41vu0c0

我希望所有这些都显示出来。

所以我将“时间”字段设置为“日期”（只需删除上述代码中的注释），现在图表中的最后一个标签无法完全显示，图表中的“点”也会触发提示事件。

这是结果： http://awesomescreenshot.com/04c1vtq94

有什么问题吗？

Answer 1

extraStyle: {
  padding: 20
}

来自论坛

extjs中时间轴的labelrenderer

1 个答案: