我在页面上使用 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=''"。