我的问题与这个 SO question中描述的问题非常相似,但并不完全相同。
我正在从数据库中动态填充一个带有时间戳和一个应该显示在折线图上的整数值的图表。图表显示数据不正确。例如,这个数据集有 3 个项目,y = 1, y = 5, y = 1 与下面对应的 X 值时间戳匹配。
此图表在 X 轴上指示的时间戳处具有 y=1 和 y =1 的两项。问题是,图表在这里重复了两次。不知道发生了什么。
如您所见,突出显示的元素表示该点应在 y = 5 处绘制,而不是 y = 1.5ish。最左边的点也应该从 y = 1 开始,而不是 y = 0。我整天都在阅读文档、论坛和 SO,我很困惑。我什至现在已经重写了两次愚蠢的东西来遵循“好”的例子,但这似乎也没有帮助。
型号代码,
Ext.define('ROOT.model.dataset', {
extend: 'Ext.data.Model',
alias: 'event',
fields: ['count', 'time'],
constructor: function (config) {
this.callParent(arguments);
Ext.apply(this, config);
}
});
图形代码,
Ext.define('Root.view.ChartPanel', {
extend: 'Ext.panel.Panel',
title: 'Event Metrics',
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.SimpleStore({fields: [
{name: 'count', type: 'int'},
{name: 'time', type: 'string'}
]})
});
this.callParent(arguments);
//CREATE CHART
this.barChart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
animate: false,
store: this.store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['count'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Count',
grid: true,
adjustMaximumByMajorUnit: false,
adjustMinimumByMajorUnit: false,
minorTickSteps: 5,
majorTickSteps: 3,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['time'],
title: 'Date'
}
],
series: [
{
type: 'line',
axis: ['left', 'bottom'],
highlight: true,
tips: {
trackMouse: true,
width: 175,
height: 20,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('time') + ': ' + storeItem.get('count'));
}
},
/* label: {
display: 'insideEnd',
field: 'count',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
constrast: true
},*/
xField: 'time',
yField: ['count'],
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
this.add(this.barChart);
}, //end init
refreshEventChart: function (data) {
this.clear();
this.store.loadData(data);
this.barChart.redraw();
},
clear: function() {
this.store.removeAll();
this.barChart.surface.removeAll();
}
});
任何帮助解决这个问题将不胜感激!