我正在使用Google Chart API(而不是Google Image Chart)创建一个折线图,其中x轴(底部)的日期和y轴(左)的数字。我想用字符串标签添加一个r轴(右)。
如果我正确理解了以下页面,则只能这样做 主轴上有字符串(折线图为x轴)。短轴(y轴和r轴) 接受连续值(如数字)而不是离散值(如 字符串)。
在Google Image Charts中,可以通过将字符串数据分配给值(例如从0到100)来解决此问题,并使用chxl参数将自定义字符串标签分配给轴。如果数据均匀分布,这尤其容易。
我查看了API参考,但在使用Google Chart API时无法找到类似内容。
有人知道这是否可能?
祝你好运, JP
答案 0 :(得分:6)
最简单的方法是在图表选项中添加以下内容:
vAxis: { ticks: [{ v: 0, f: 'Zero'}, {v: 1, f: 'One'}, {v: 2, f: 'Two'}]}
在这个例子中,我指出应该显示“Zero”而不是0,“One”而不是1,等等。
答案 1 :(得分:3)
实现这一目标的一种方法。
如您所知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>
它可以解决我的问题,即使它是一种黑客攻击。
答案 2 :(得分:2)
只要谷歌将来不会更改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,
}
},