关于 javascript：使用 Extjs 在圆形仪表图中间添加图例

Add a legend in the middle of a circular Gauge chart with Extjs

我已经使用 extjs 图表系列绘制了一个圆形仪表。我想将仪表的值指示到它的中间，但我没有成功。有人可以帮我吗？

这是我试过的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

{
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\\'" 但是因为我不需要定义一个字段，所以我不知道要使用什么。

非常感谢

相关讨论

这是解决方案，您可以在图表的渲染功能上更改您的sprite，然后重新绘制它，更改x，y，值等内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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
}

});