将标签添加到Google图表
[英]Add Labels to Google Chart
问题描述
I have been trying to get a chart to display a different label for the columns along the horizontal axis. 
我一直试图获取一个图表，以沿水平轴为列显示不同的标签。
I have used: 我用过：
cols: [{id: '1', label: '00', type: 'number'},
{id: '2', label: '01', type: 'number'},
{id: '3', label: '02', type: 'number'}],
// etc...
The numbers along the bottom are supposed to represent hours and I need them to start at '00' and end at '23' Is there a way to mask them/ replace with specified values? 底部的数字应该表示小时，我需要它们从'00'开始到'23'结束。 有没有办法屏蔽它们/用指定的值替换？
Here is the chart at the moment: 这是目前的图表：
But it doesn't seem to be working :( 但这似乎不起作用:(
btw: I cant send them through in the array as '00' etc because this happens: Uncaught Error: Not a valid 2D array Even if I change it to a string because then the gridlines don't work as both values have to be of the same type. 顺便说一句：我不能以“ 00”的形式通过数组发送它们，因为会发生这种情况： 未捕获的错误：不是有效的2D数组，即使我将其更改为字符串，因为网格线不起作用，因为两个值都必须是相同的类型。 arghhh 啊啊
also, At the moment they are numbers 1-22 when they should also be 1-23 - Any ideas why it is missing off the last value? 另外，目前它们是1-22时的数字，也应该是1-23- 为何缺少最后一个值？
Edit 编辑
Here is the JsFiddle: http://jsfiddle.net/3AeC5/1/ 这是JsFiddle： http : //jsfiddle.net/3AeC5/1/
The data passed in: 数据传入：
var data = google.visualization.arrayToDataTable();
is passed in from a function: 从一个函数传入：
$.getJSON('charts_ajax.php',{'a' : "<?=$value?>" }, function(data){
if(data){
initGoogleChart(data,"<?=$key?>","<?=$value?>");
}else {
console.log("There is no data coming back");
}
});
The value of data is json_encode($chartData) and returns: 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]
]
The var_dump of $chartData is: $ 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)
}
} }
1 个解决方案
解决方案1
1 已采纳 2013-11-11 15:57:13
You have a small handful of problems here. 您这里有少量问题。 First, the rows you are passing to the arrayToDataTable constructor don't contain a column label row as the first row, so row [0, 372] is being used to create the column labels. 首先，要传递给arrayToDataTable构造函数的行不包含列标签行作为第一行，因此使用行[ arrayToDataTable ]创建列标签。 You either need to include a column label row, or pass true as the second argument to the arrayToDataTable constructor: 您要么需要包含列标签行，要么将true作为第二个参数传递给arrayToDataTable构造函数：
// either this:
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
// data rows
]);
// or this:
var data = google.visualization.arrayToDataTable([
// data rows
], true);
Second, your hAxis.format option is wrong if you want to get leading zero's. 其次，如果您想获得前导零，则hAxis.format选项是错误的。 Set it to '00' instead of '####' . 将其设置为'00'而不是'####' 。 Third, your chartArea is too wide, and is cutting off the last label on the chart. 第三，您的chartArea太宽，并且切断了图表上的最后一个标签。 Leave a bit of space at the end for the "23" label to draw by setting chartArea.width to 810 instead of '100%' (leaving 10 pixels at the end of the chart for the label to draw). 通过将chartArea.width设置为810而不是'100%' ，在“ 23”标签的末尾留一点空间以绘制标签（在图表末尾留10个像素）。
See these fixes here: http://jsfiddle.net/asgallant/3AeC5/2/ 请在此处查看这些修复程序： http : //jsfiddle.net/asgallant/3AeC5/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.