0

我在页面上使用 Google Visualizations 量规,但重要的是其显示的值不会显示为针正下方的标签。

我找到了两种方法来做到这一点。一旦您通过 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="" 什么都不做。

因此,不仅仅是能够通过以下方式更新值:

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,我会得到“问题在控制台中解析 d=''"。
4

5 回答 5

6

添加到 Madthews 答案:

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

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

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

我已经玩了一段时间了,上面css的第一行是必不可少的,否则它将无法工作!

于 2013-11-04T11:56:42.797 回答
1

好的,我会尝试回答:

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 个“空格”。次要厚度表示两个主要厚度之间的“空白”空间的数量。在示例中,您将在箭头和代表次要粗线的细线之间找到完美匹配。

于 2013-05-06T23:26:57.173 回答
1

您可以只插入带有空白格式字段的值,而不是弄乱样式。

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

这也适用于addRows.

jsfiddle在这里:https ://jsfiddle.net/08x2m4vo/2/

于 2016-04-29T20:49:47.643 回答
0

Use this. This is also labelled by Google.

var data = google.visualization.arrayToDataTable([
 ['Label', 'Value'],
 ['', {v: <Your_own_value_of_the_gauge_meter>, f: ''}],
]);

In place of "<Your_own_value_of_the_gauge_meter>" use your value variable. That's it.

于 2016-12-14T08:55:49.693 回答
-1

那这个呢?

['Label', 'Value'],
['', 80]
于 2016-05-30T10:19:08.633 回答