extjs4 - 带日期的简单折线图？

我正在尝试使用ExtJS 4在折线图上绘制三个点，但没有一个点显示。我在控制台中没有收到任何Javascript错误。谁能告诉我我做错了什么？

var chartArray = [
    {"date1":"2012-01-22", "count":1},
    {"date1":"2012-01-23", "count":2},
    {"date1":"2012-01-24", "count":3}
];

Ext.onReady(function() {

    var store1 = new Ext.data.ArrayStore({
        fields: [
            {name: 'date1', type: 'date', dateFormat: 'Y-m-d'},
            {name: 'count', type: 'data'}
        ],
        data: chartArray
    });

    Ext.create('widget.panel', {
        width: 500,
        height: 400,
        renderTo: 'chart1',
        layout: 'fit',
        items: {
            xtype: 'chart',
            animate: true,
            store: store1,
            insetPadding: 30,
            legend: {
                position: 'bottom'
            },
            axes: [
                {
                    type: 'Numeric',
                    minimum: 0,
                    maximum: 10,
                    position: 'left',
                    fields: ['date1'],
                    title: false,
                    grid: {
                        stroke: '#0F0',
                        fill: '#0F0',
                        'stroke-width': 5

                    },
                    label: {
                        font: '10px Arial',
                        fill: '#80858D',
                        color: '#FFFFFF',
                        renderer: function(val) {
                            return val;
                        }

                    }
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    color: '#FFFFFF',
                    grid: false,
                    fields: ['date1'],
                    fill: '#0F0',
                    title: 'Daily Count',
                    label: {
                        font: '11px Arial',
                        color: '#FFFFFF',
                        fill: '#80858D',
                        rotate: {degrees: 315},
                        renderer: function(date) {
                            console.log("Date: " + date);
                            return date;
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'line',
                    axis: 'left',
                    xField: 'date1',
                    yField: 'count',
                    style: {
                        fill: '#f47d23',
                        stroke: '#f47d23',
                        'stroke-width': 3
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 2,
                        radius: 2,
                        'stroke-width': 0,
                        fill: '#38B8BF',
                        stroke: '#38B8BF'
                    }
                }
            ]
        }
    });
});

这是没有ExtJS的html包括：

<!doctype html>
<html>
<head>
<title>Line</title>
<script type="text/javascript" src="line.js"></script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>

带日期的简单折线图？

2 个答案: