如何從Google可視化表格中刪除價值標籤？

我在頁面上使用Google Visualizations標尺，但重要的是它顯示的值不會顯示爲標籤正下方的標籤。如何從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 =「」不做任何事情。

所以，而不是僅僅是能夠更新與價值：

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 =''「。

來源

2013-05-06 Jemenake

添加到Madthews答案：

對於那些你們誰是試圖從谷歌Gague圖表中刪除的標籤。

如果您將以下代碼添加到您的頁面中（我已將它放在標題中以保持整潔），那麼您可以將標籤的字體大小設置爲任何你想要的。

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

我一直在現在這個玩弄了一段時間以上的CSS的頂線是必不可少的，否則將無法正常工作！

來源

2013-11-04 11:56:42

感謝分享... – 2015-04-22 18:25:34

好，我會盡力回答：

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/

上面的小提琴解釋你的意思e minorThicks。這是正確的，如果你設置2你得到3「空格」。較小的厚度表示兩個主要厚度之間的「空白」空間的數量。在這個例子中，你會選擇你的箭頭和代表較小厚度的細線之間的完美匹配。

來源

2013-05-06 23:26:57 Madthew

它對您有幫助嗎？ – Madthew 2013-05-08 14:05:44

而不是混淆樣式，你可以插入一個空格式字段的值。

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

這也適用於addRows。

的jsfiddle這裏：https://jsfiddle.net/08x2m4vo/2/

來源

2016-04-29 20:49:47 woot

-1

這個是什麼？

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

來源

2016-05-30 10:19:08 BIBI

使用此。這也是由Google標記的。

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

到位「<Your_own_value_of_the_gauge_meter>」的使用值的變量。而已。

來源

2016-12-14 08:55:49

如何從Google可視化表格中刪除價值標籤？

回答

相關問題