简单的折线图和日期? [英] Simple Line Chart with Dates?
问题描述
我正在尝试使用ExtJS 4在折线图上绘制三个点，但是这些点都没有显示.我在控制台中没有出现任何Javascript错误.谁能告诉我我在做什么错?
I'm trying to use ExtJS 4 to draw three points on a line chart but none of the points are displaying. I'm not getting any Javascript errors in the console. Can anyone tell me what I'm doing wrong?
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:
Here's the html without the ExtJS includes:
<!doctype html>
<html>
<head>
<title>Line</title>
<script type="text/javascript" src="line.js"></script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>
推荐答案
首先，将ArrayStore更改为JsonStore，您的代码将起作用.
First of all, change your ArrayStore to JsonStore, and your code will work.
但是无论如何，我不建议在ExtJs4中使用类别或时间轴.对Sencha感到羞耻，他们仍然无法使其稳定运行.我花了大约2周的时间来尝试实现带有时间X轴的简单折线图，但没有成功.
But anyway, I don't recommend using category or time axes in ExtJs4. Shame on Sencha, they still can't get it work stable. I spend about 2 weeks trying to implement simple line charts with a time X axis with no success.
然后我在这里找到了一个解决方案-用数字轴替换时间/类别轴，然后以时间戳的形式加载日期.您始终可以将时间戳转换为日期字符串(在标签和提示中).我现在对这种方法感到满意，并且图表的绘制速度更快！
Then I found here a solution - replace time/category axis with a numeric axis and then just load dates in a form of timestamps. You can always convert a timestamp into a date string (in labels and tips). I'm happy with this approach now, and the chart renders much faster!
这篇关于简单的折线图和日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
