如何在y軸上設置自定義標籤

我正在使用Google Chart API（不是Google圖表圖表）創建x軸（底部）上的日期和y軸（左側）上的數字的折線圖。我想用字符串標籤添加一個r軸（右側）。如何在y軸上設置自定義標籤

如果我正確理解以下頁面，則主軸上只能有字符串（折線圖的x軸）。短軸（y軸和r軸）只有接受連續值（如數字）而不是離散值（如字符串）。

Customizing Axes

在谷歌圖片圖表可以通過字符串數據分配給一個值來解決此（比如從0到100）和分配自定義串標記使用chxl參數的軸。如果數據均勻分佈，這一點特別容易。

我已經看過API參考，但使用Google Chart API時找不到類似的東西。

有誰知道是否有可能嗎？

最好的問候， JP

來源

2012-03-17 user1119112

一個HACK的方式來實現這一目標。

如您所知Google Chart使用SVG繪製圖表。因此，繪製圖表後，將SVG元素插入HTML DOM。因此，通過使用jQuery，您可以找出vAxis標籤元素並更改其文本。

例如，在我的情況下，我的vAxis具有類似於[0,1,2,3,4]的值。我想將它改爲[「IDLE」，「PCH」，「FACH」，「DCH」，「」]而不是數字。

我使用瀏覽器的web元素檢查器工具創建了vAxis標籤DOM結構的SVG元素。

因此，我在繪製圖表後添加了如下所示的代碼。

$('#busy_rrclogs svg text[text-anchor="end"]:contains("0")').text("IDLE"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("1")').text("PCH"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("2")').text("FACH"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("3")').text("DCH"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("4")').text("");

我把我的圖加入了下面的HTML div元素，就像你從上面的jQuery選擇器中看到的那樣。

<div id="busy_rrclogs"> 
</div>

它可以解決我的問題，即使它是一種破解。

來源

2013-01-16 06:26:30 Wonil

只要谷歌不會在將來改變API，這種黑客行爲。此外，它的作品，直到你不使用實驗選項「探險家」。如果您使用縮放，則圖表會在每個鼠標滾輪事件中重新呈現，並且您的值已消失。非常可悲的是，圖表API不會暴露任何縮放或重新渲染事件。在繪製圖表後，只有一次「準備好」事件被觸發。此外，我注意到，我不能計算出我提供給api的yAxis值。如果api決定這些字符串太長，它只會用工具提示渲染它的子字符串。

所以，只有一個笨拙和一個真正的解決方法，我能夠想出。我離開了笨拙的一個，因爲它符合以前的帖子

var chartDiv = document.getElementById ("chart"); 
chartDiv .addEventListener ("mousewheel", ProcessChart, false); 
//take care of "mousewheel" event browser compatibility!!! 

function ProcessChart() { 

    setTimeout(function() { 
     $("#chart svg text[text-anchor='end']:contains('$C$')").each(function() { 

      var $this = $(this); 
      var val = parseInt($this.text()); 
      var label = GetCommunicationLabel(val); 

      $this.text(label);       
     }); 
    }, 20); 
}

請注意，我用setTimeout函數來處理標籤。該圖表也是在mousewheel事件上呈現的，如果沒有延遲，您將嘗試處理尚不存在的標籤。20毫秒只是實驗值，它取決於您的圖表在鼠標滾輪事件上重新渲染的時間。不幸的是，當舊值被替換時，用戶能夠檢測到閃爍。

我終於找到了真正的解決方案。

vAxes: { 
0: { 
format: '#%', 
ticks: [0, 0.25, 0.5, 0.75, 1] 
//minValue: 0, 
//maxValue: 1, 
//title: batteryText, 
}, 
1: { 
ticks: [ { v: 0, f: GetCommunicationLabel(0) }, 
      { v: 1, f: GetCommunicationLabel(1) }, 
     { v: 2, f: GetCommunicationLabel(2) }, 
     { v: 3, f: GetCommunicationLabel(3) }, 
     { v: 4, f: GetCommunicationLabel(4) }], 
    // format: "#",      
textPosition: 'out' 
//minValue: 0, 
//maxValue: 3, 
//title: communicationText, 
} 
},

來源

2014-01-30 13:47:00 mattti

所有的最簡單的方法是將以下添加到您的圖形選項：

vAxis: { ticks: [{ v: 0, f: 'Zero'}, {v: 1, f: 'One'}, {v: 2, f: 'Two'}]}

在這個例子中，我指出「零」應顯示，而不是0，「一「而不是1等。

來源

2015-05-14 14:24:26 Greg

如何在y軸上設置自定義標籤

回答

相關問題