Я пытаюсь использовать 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'
}
}
]
}
});
});
Вот HTML без ExtJS включает в себя:
<!doctype html>
<html>
<head>
<title>Line</title>
<script type="text/javascript" src="line.js"></script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>