在仪表Dojo中添加标题文本

时间:2013-11-25 17:16:06

标签: svg dojo gauge dojox.gfx

我需要在Dojo呈现的svg中插入标题(不是工具提示,顶部的文本)。我怎么能这样做?

这是我的Dgauge: http://jsfiddle.net/MacroX/pZU93/1/

PD:行

gauge.title = 'Test Report'

不显示标题

2 个答案:

答案 0 :(得分:0)

编辑:问题是关于标尺顶部的标签,而不是我原先认为的title属性。

您可以使用TextIndicator,就像针对针下方的值标签所做的那样,但您可以设置labelFunc属性,该属性定义了一个函数,用于设置标签并显示返回的任何字符串从它。

var labelText = new TextIndicator();
labelText.set('x', 73.3);
labelText.set('y', 55);
labelText.set('labelFunc', function() {return 'Test Report';});
gauge.addElement('labelText', labelText);

Here is a modified version of your fiddle with the title text in place


如果有其他人需要,原始答案会在下面重现

创建仪表时传递title

var gauge = new CircularLinearGauge({
    title: 'Test Report'
}, dojo.byId("gauge"));

您也可以在创建仪表后使用set进行设置:

gauge.set('title', 'Test Report'); //does work :)

原因是量表小部件需要在窗口小部件模板中的特定元素上设置您提供的文本titlegauge.title只设置计量器窗口小部件的title属性,窗口小部件不知道该属性何时或具有什么值,因此无法将其显示为标题属性仪表。

答案 1 :(得分:0)

最后我有办法解决这个问题,当你需要个性化你的dgauge时,这很有用。这里的例子如下: http://jsfiddle.net/MacroX/THJqV/

我所做的是基本创建一个量表,用背景白色填充,然后在

中添加元素
var baseWidth = 400;
gauge.addElement("background", function (g) {
    var auxHeight = baseWidth * objGauge.offsetHeight / objGauge.offsetWidth;
    g.createRect({
        width: 400, height: auxHeight
        //width: 400, height: 300
    }).setFill("#FFF");
});

我不知道是否是最好的方式,但是有效并且我在其他网站上找不到类似的东西

我认为很棒,这只支持多个图表仅在一个SVG中使用

我希望这对其他人有用