Question

我在网页上使用了Google可视化指标，但重要的是它显示的值不会显示在针的正下方。

我找到了两种方法。一旦您在DOM中导航到规范窗口小部件并导航到SVG部分，您可以将textContent元素设置为空字符串，也可以完全删除整个文本标签实体。

function removeLabel(widget) {
    var gauge_label_parent = widget.getElementsByTagName("g")[1];
    var gauge_label = gauge_label_parent.getElementsByTagName("text")[0];
    gauge_label.textContent = "";
    // Another way of getting rid of the text: remove the element
    //    gauge_label_parent.removeChild(gauge_label);
}

问题是：这两种技术都是第一次起作用。如果我使用更新的值重新绘制仪表，则标签会重新出现，并尝试删除标签元素或设置textContent =＆＃34;＆＃34;什么都不做。

所以，而不是只能用以下内容更新值：

data.setValue(0, 1, newValue);
chart.draw(data, options);

我发现我必须更改选项，例如：

data.setValue(0, 1, newValue);
options.minorTicks = 3; // Change the options somehow
chart.draw(data, options); // Tell gauge to draw that
options.minorTicks = 2; // Change the options back to what they were
chart.draw(data, options); // Draw again

这是一个小提琴，看看它是如何工作的或不是。将fixLabel设置为true或false，具体取决于您是否要存在标签问题。请记住，第一次标签将（正确）丢失。更新其值时会重新显示。 http://jsfiddle.net/jemenake/72dMt/2/

所以，有几个问题：

知道为什么要这样做吗？
有没有办法删除标签而无需经历这个改变选择的业务？
奖金问题：我不清楚minorTicks应该如何运作，或者它是否被打破？文档说它应该是专业之间的小刻度数，但是设置为2只给我1个小刻度，3给我2，等等。如果我将它设置为0或1，我得到＆＃34;问题解析d =＆＃39;＆＃39;＆＃34;在控制台中。

Answer 1

添加到Madthews的回答：

对于那些试图从Google Gague Chart中删除标签的人。

如果您将以下代码添加到页面中（我已将其放在标题中以保持整洁），那么您可以将标签的字体大小设置为您想要的任何内容。

<style>
* {text-rendering: optimizeLegibility; font-size:100%;}
svg g g {font-size:0px;}
</style>

我一直在玩这个问题已经有一段时间了，上面的CSS的顶线是必不可少的，否则它将无法工作！

Answer 2

好的，我会尽力回答：

1）标签选项不受当前API版本管理 https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge

解决方法：尝试使用此CSS

svg g g  {
 font-size:0px;
}

http://jsfiddle.net/Madthew/72dMt/17/

上面的小提琴解释了minorThicks的含义。这是正确的，如果你设置2你得到3“空格”。较小的厚度表示两个主要厚度之间的“BLANK”空间的数量。在该示例中，您将获得箭头与表示较小粗细的细线之间的完美匹配。

Answer 3

您可以只使用空白格式化字段插入值，而不是弄乱样式。

var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Unitless Indicator', {v:counter, f:''} ]
]);

这也适用于addRows。

jsfiddle here：https://jsfiddle.net/08x2m4vo/2/

Answer 4

使用它。这也标有Google。

#login {
width: 20%;
height: 30%;
text-align:center;
}

取代＆＃34;＆lt; Your_own_value_of_the_gauge_meter＆gt;＆＃34;使用你的价值变量。那就是它。

Answer 5

这个怎么样？

['Label', 'Value'],
['', 80]

如何从Google Visualizations量表中删除值标签？

5 个答案: