Question

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

如果我正确理解了以下页面，则只能这样做主轴上有字符串（折线图为x轴）。短轴（y轴和r轴）接受连续值（如数字）而不是离散值（如字符串）。

Customizing Axes

在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

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

如您所知Google图表使用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>

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

Answer 3

只要谷歌将来不会更改api，这个黑客就可以运行。它也可以使用，直到你不使用实验选项“explorer”。如果使用缩放，则会在每个鼠标滚轮事件上重新呈现图表，并且您的值将消失。非常可悲的是图表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毫秒只是实验值，它取决于您的图表在mousewheel事件上重新渲染的时间。不幸的是，当用旧的值替换时，用户能够检测到闪烁。

我终于找到了真正的解决方案。

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,
}
},

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

3 个答案: