Javascript 用EXTJS在圆规图的中间添加一个图例
我使用extjs图表系列绘制了一个圆形量规。我想将仪表的值指示到仪表中间,但我没有成功。有人能帮我吗 以下是我尝试的代码:Javascript 用EXTJS在圆规图的中间添加一个图例,javascript,extjs,Javascript,Extjs,我使用extjs图表系列绘制了一个圆形量规。我想将仪表的值指示到仪表中间,但我没有成功。有人能帮我吗 以下是我尝试的代码: { xtype: 'polar', width: 60, height: 60, background: '#00c6c9', style: {left:0, right:0}, series: { type: 'gauge', minimum: 0, m
{
xtype: 'polar',
width: 60,
height: 60,
background: '#00c6c9',
style: {left:0, right:0},
series: {
type: 'gauge',
minimum: 0,
maximum: 30,
value: 10,
colors: ['#25a2b6', 'lightgrey'],
donut: 75,
background: '#00c6c9',
totalAngle: Math.PI * 2,
style: {left:0, right:0},
needleLength: 100
/*,
renderer: function(sprite, record, attributes, index, store) {
var sprite2 = Ext.create('Ext.draw.Sprite', {
type: 'text',
text: Math.floor(attributes.value),
font: '16px Arial',
x: 30,
y: 30
});
sprite2.show(true);
return attributes;
},
label: {
field: 'value',
display: 'middle'
}*/
}
}
我只想显示序列的值“10”。在注释中,您可以看到我尝试添加渲染器函数和标签属性。在这个标签中,我想我不能写“field:'value'”,但因为我不需要定义字段,所以我不知道该使用什么
非常感谢这是解决方案,您可以在图表的渲染功能上更改精灵,然后重新绘制,更改x、y、值和其他内容
Ext.create({
xtype: 'polar',
renderTo: document.body,
width: 160,
height: 160,
background: '#00c6c9',
style: {
left: 0,
right: 0
},
listeners:{
render: function(chart){
var sprite=Ext.clone(chart.getSprites()[0]);
//modify sprite here
sprite.text=''+chart.getSeries()[0].config.value;
chart.setSprites(sprite);
chart.redraw();
}
},
sprites: [{
type: 'text',
x: 58,
y: 95,
text: 'test',
fontSize: 40,
fillStyle: 'white'
}],
series: {
type: 'gauge',
minimum: 0,
maximum: 30,
value: 10,
colors: ['#25a2b6', 'lightgrey'],
donut: 75,
background: '#00c6c9',
totalAngle: Math.PI * 2,
style: {
left: 0,
right: 0
},
needleLength: 100
}
});
你能为这个做一把小提琴吗。你可以在这里增强。当然,给你:太好了!非常感谢你