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

Question

我正在使用Google Chart API(而不是Google Image Chart)创建一个折线图,其中x轴(底部)上的日期和y轴(左)上的数字.我想用字符串标签添加一个r轴(右).

如果我正确理解了以下页面,则只能在长轴上使用字符串(x轴为折线图).短轴(y轴和r轴)仅接受连续值(如数字)而不接受离散值(如字符串).

自定义轴

在Google Image Charts中,可以通过将字符串数据分配给值(例如从0到100)来解决此问题,并使用chxl参数将自定义字符串标签分配给轴.如果数据均匀分布,这尤其容易.

我查看了API参考,但在使用Google Chart API时找不到任何相似内容.

有谁知道这是否可能？

最好的问候,JP

Answer 1

最简单的方法是在图表选项中添加以下内容:

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

在这个例子中,我指出应该显示"Zero"而不是0,"One"而不是1,等等.

Answer 2

实现这一目标的一种 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>

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