在仪表 Dojo 内添加标题文本

Posted 2023-02-16

【中文标题】在仪表 Dojo 内添加标题文本

【英文标题】：Adding title text inside gauge Dojo

【发布时间】：2013-11-25 17:16:06

【问题描述】：

我需要在 Dojo 渲染的 svg 中插入一个标题（不是工具提示，而是顶部的文本）。我该怎么做？

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

PD：线

gauge.title = 'Test Report'

不显示标题

【参考方案1】：

编辑：问题是关于仪表顶部的标签，而不是我最初认为的 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 :)

---

原因是仪表小部件需要将您提供的文本设置为小部件模板中特定元素上的title。 gauge.title 只是设置了仪表小部件的 title 属性，小部件不知道该属性何时或以什么值设置，因此无法使其显示为仪表上的标题属性。

【讨论】：

mmm 我想我不清楚，我不需要工具提示，我需要图形顶部的文本作为标题。我正在考虑创建一个空组件，然后在 prev jsfiddle 中添加元素，这可能吗？示例：将var gauge = new CircularLinearGauge(, dojo.byId("gauge")); 替换为var gauge = new EmptyGauge(width:400,height:400, dojo.byId("gauge"));

我已经更新了我的答案，更符合我认为您想要的内容。

您的回答很有帮助，但不完全是我所需要的。实际上，我找到了一种方法，并将其标记为其他有此问题的人的答案。还是谢谢

【参考方案2】：

最后我找到了解决这个问题的方法，这在您需要个性化您的 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 中支持多个图表 dgauges

我希望这对其他人有用

【讨论】：

你的问题从一开始就不是很清楚。你从来没有提到过多个仪表。实际上，您确实最终使用了TextIndicator，就像我提到的那样；您刚刚使用了 value 并移动了 x 和 y 值以将其显示在仪表上方。

多个仪表是一项新要求。我当然用你说的，但你回答的问题是我需要标题在顶部，而不是在仪表内，所以我必须找到一种方法来移动仪表，我终于做到了