我正在使用extjs 4.2.2图表。我的要求是显示折线图也想显示节点中的值。在我看到的一些帖子中,可以使用Series标签完成。不知何故,它没有在节点或数据点中显示值。以下是图表代码。
items : [ {
xtype : 'chart',
// renderTo : Ext.getBody(),
width : 1600,
animate : true,
height : 400,
shadow : true,
// theme: 'Category2',
store : 'SWeatherPoint',
axes : [ {
title : 'Temperature',
type : 'Numeric',
position : 'left',
fields : [ 'temperature' ],
minimum : 0,
maximum : 100,
minorTickSteps : 1,
// grid: true
grid : {
odd : {
opacity : 1,
fill : '#ddd',
stroke : '#bbb',
'stroke-width' : 0.5
}
}
}, {
title : 'Day of the Month',
type : 'Time',
position : 'bottom',
fields : [ 'date' ],
dateFormat : 'M d',
constrain : true,
fromDate : new Date('1/1/07'),
toDate : new Date('1/30/07'),
grid : true
} ],
series : [ {
type : 'line',
xField : 'date',
yField : 'temperature',
highlight : {
size : 7,
radius : 7
},
axis : 'left',
smooth : true,
fill : true,
label : {
// display : 'under', // or 'rotate'
field : 'temperature',
renderer : function(label, storeItem, item, i, display, animate, index) {
console.log(this);
console.log(item.get('temperature')+''+item+'' + i+''+display+ ''+index);
return String(item.get('temperature'));
}
},
tips : {
trackMouse : true,
width : 200,
height : 28,
renderer : function(storeItem, item) {
this.setTitle(storeItem.get('temperature') + ': '
+ storeItem.get('date') + ' views');
}
},
style : {
fill : '#18428E',
stroke : '#18428E',
'stroke-width' : 3,
'stroke-dasharray' : 10
// You need to add this!
},
markerConfig : {
type : 'circle',
size : 4,
radius : 4,
'stroke-width' : 0,
fill : '#18428E',
stroke : '#18428E'
}
} ]
如果有人可以指出问题,将会有所帮助。
谢谢, 阿米特
答案 0 :(得分:2)
看起来你只是缺少项目,并将setTitle更改为setText。
tips: {
trackMouse: true,
layout: 'fit',
items: [{
xtype: 'label'
}],
renderer: function (storeItem, item) {
this.down('label').setText(storeItem.get('temperature') + Ext.util.Format.date(storeItem.get('date'), 'm/d/Y') + ' views');
}
},
编辑:添加HighCharts示例:
以下是我拿yahoo.com历史股票价格并从中获得股票图表的例子。
var chart = Ext.create('Chart.ux.Highcharts', {
itemId: 'stockChartH',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Close'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Price',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['Date'],
title: 'Date',
label: {
renderer: function (value, label, storeItem, item, i, display, animate, index) {
return Ext.util.Format.date(value, 'm/d');
}
}
}],
series:[{
dataIndex: 'Close',
name: 'Stock Price',
tips: {
trackMouse: true,
layout: 'fit',
items: [{
xtype: 'label'
}],
renderer: function (storeItem, item) {
this.down('label').setText(Ext.util.Format.date(storeItem.get('Date'), 'm/d/Y') + ': ' + storeItem.get('Close') + ' Closing Price');
}
}
}],
xField: 'Date',
store: 'yahoo.yahooHistorical_s',
chartConfig: {
chart: {
type: 'spline',
},
title: {
text: ' '
},
xAxis: {
type: "date",
labels: {
formatter: function (value, label, storeItem, item, i, display, animate, index) {
return Ext.util.Format.date(value, 'm/d');
}
},
plotLines: [{
color: '#FF0000',
width: 5,
title: 'test',
value: 'mar',
}]
},
yAxis: {
title: {
text: 'Price'
}
}
}
});