如何在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轴上设置自定义标签

回答

相关问题