[英]Add a legend in the middle of a circular Gauge chart with Extjs
我用extjs圖表系列繪制了圓形規格。 我想在其中間指出儀表的價值,但我沒有成功。 有人能幫助我嗎?
這是我試過的代碼:
{
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
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.