如何在y轴上设置自定义标签

How to set custom labels on y axis

本文关键字：设置 自定义 标签      更新时间：2023-09-26

我正在使用Google Chart API（而不是Google Image Chart）创建一个日期位于x轴（底部）、数字位于y轴（左侧）的折线图。我想添加一个带有字符串标签的r轴（右）。

如果我正确理解下一页，只有长轴上有字符串（折线图为x轴）。仅次轴（y和r轴）接受连续值（如数字）而不接受离散值（如字符串）。

自定义轴

在谷歌图像图表中，可以通过将字符串数据分配给一个值（比如从0到100）并使用chxl参数将自定义字符串标签分配给轴来解决这个问题。如果数据间隔均匀，这就特别容易。

我看过API参考资料，但在使用Google Chart API时找不到类似的内容。

有人知道这是否可能吗？

谨致问候，JP

最简单的方法是将以下内容添加到图形选项中：

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

在这个例子中，我指出应该显示"零"而不是0，应该显示"一"而不是1，等等。

实现这一目标的一种HACK方法。

正如您所知，谷歌图表使用SVG绘制图表。因此，在绘制图表后，SVG元素会插入到HTMLDOM中。因此，通过使用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("");

我将图形添加到下面的HTMLdiv元素中，您可以从上面的jQuery选择器中看到。

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

它可以解决我的问题，即使它是一种黑客。

只要谷歌将来不会更改api，这个黑客就可以工作。此外，它还可以工作，直到你不使用实验选项"资源管理器"。如果您使用缩放，则图表将在每个鼠标滚轮事件上重新呈现，并且您的值将消失。非常可悲的是，图表api没有公开任何缩放或重新渲染事件。只有"就绪"事件在绘制图表后才触发一次。此外，我注意到，当我将yAxis值提供给api时，我无法对其进行计数。如果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函数来处理标签。图表也在鼠标滚轮事件上呈现，如果不延迟，您将尝试处理尚不存在的标签。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,
}
},
相关文章：