[英]Add Labels to Google Chart
我一直试图获取一个图表,以沿水平轴为列显示不同的标签。
我用过:
cols: [{id: '1', label: '00', type: 'number'},
{id: '2', label: '01', type: 'number'},
{id: '3', label: '02', type: 'number'}],
// etc...
底部的数字应该表示小时,我需要它们从'00'开始到'23'结束。 有没有办法屏蔽它们/用指定的值替换?
这是目前的图表:
但这似乎不起作用:(
顺便说一句:我不能以“ 00”的形式通过数组发送它们,因为会发生这种情况: 未捕获的错误:不是有效的2D数组,即使我将其更改为字符串,因为网格线不起作用,因为两个值都必须是相同的类型。 啊啊
另外,目前它们是1-22时的数字,也应该是1-23- 为何缺少最后一个值?
编辑
这是JsFiddle: http : //jsfiddle.net/3AeC5/1/
数据传入:
var data = google.visualization.arrayToDataTable();
从一个函数传入:
$.getJSON('charts_ajax.php',{'a' : "<?=$value?>" }, function(data){
if(data){
initGoogleChart(data,"<?=$key?>","<?=$value?>");
}else {
console.log("There is no data coming back");
}
});
data的值为json_encode($ chartData)并返回:
[
[0, 372],
[1, 212],
[2, 234],
[3, 400],
[4, 732],
[5, 1940],
[6, 3672],
[7, 4744],
[8, 4174],
[9, 3506],
[10, 3602],
[11, 3774],
[12, 3742],
[13, 3863],
[14, 4329],
[15, 4054],
[16, 3073],
[17, 3456],
[18, 3620],
[19, 3484],
[20, 3595],
[21, 2488],
[22, 1466],
[23, 656]
]
$ chartData的var_dump为:
array(24) {
[0]=>
array(2) {
[0]=>
int(0)
[1]=>
int(372)
}
[1]=>
array(2) {
[0]=>
int(1)
[1]=>
int(212)
}
[2]=>
array(2) {
[0]=>
int(2)
[1]=>
int(234)
}
[3]=>
array(2) {
[0]=>
int(3)
[1]=>
int(400)
}
[4]=>
array(2) {
[0]=>
int(4)
[1]=>
int(732)
}
[5]=>
array(2) {
[0]=>
int(5)
[1]=>
int(1940)
}
[6]=>
array(2) {
[0]=>
int(6)
[1]=>
int(3672)
}
[7]=>
array(2) {
[0]=>
int(7)
[1]=>
int(4744)
}
[8]=>
array(2) {
[0]=>
int(8)
[1]=>
int(4174)
}
[9]=>
array(2) {
[0]=>
int(9)
[1]=>
int(3506)
}
[10]=>
array(2) {
[0]=>
int(10)
[1]=>
int(3602)
}
[11]=>
array(2) {
[0]=>
int(11)
[1]=>
int(3774)
}
[12]=>
array(2) {
[0]=>
int(12)
[1]=>
int(3742)
}
[13]=>
array(2) {
[0]=>
int(13)
[1]=>
int(3863)
}
[14]=>
array(2) {
[0]=>
int(14)
[1]=>
int(4329)
}
[15]=>
array(2) {
[0]=>
int(15)
[1]=>
int(4054)
}
[16]=>
array(2) {
[0]=>
int(16)
[1]=>
int(3073)
}
[17]=>
array(2) {
[0]=>
int(17)
[1]=>
int(3456)
}
[18]=>
array(2) {
[0]=>
int(18)
[1]=>
int(3620)
}
[19]=>
array(2) {
[0]=>
int(19)
[1]=>
int(3484)
}
[20]=>
array(2) {
[0]=>
int(20)
[1]=>
int(3595)
}
[21]=>
array(2) {
[0]=>
int(21)
[1]=>
int(2488)
}
[22]=>
array(2) {
[0]=>
int(22)
[1]=>
int(1466)
}
[23]=>
array(2) {
[0]=>
int(23)
[1]=>
int(656)
}
}
您这里有少量问题。 首先,要传递给arrayToDataTable
构造函数的行不包含列标签行作为第一行,因此使用行[ arrayToDataTable
]创建列标签。 您要么需要包含列标签行,要么将true
作为第二个参数传递给arrayToDataTable
构造函数:
// either this:
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
// data rows
]);
// or this:
var data = google.visualization.arrayToDataTable([
// data rows
], true);
其次,如果您想获得前导零,则hAxis.format选项是错误的。 将其设置为'00'
而不是'####'
。 第三,您的chartArea太宽,并且切断了图表上的最后一个标签。 通过将chartArea.width
设置为810
而不是'100%'
,在“ 23”标签的末尾留一点空间以绘制标签(在图表末尾留10个像素)。
请在此处查看这些修复程序: http : //jsfiddle.net/asgallant/3AeC5/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.