我一直试图让图表沿水平轴显示不同的标签。
我用过:
cols: [{id: '1', label: '00', type: 'number'},
{id: '2', label: '01', type: 'number'},
{id: '3', label: '02', type: 'number'}],
// etc...
底部的数字应该代表几个小时,我需要它们从&00; 00'开始。结束于' 23' 有没有办法屏蔽它们/用指定值替换?
目前是图表:
但它似乎并没有起作用:(
顺便说一下:我不能把它们发送到数组中,因为' 00'等等,因为这种情况发生:Uncaught Error: Not a valid 2D array即使我将其更改为字符串,因为网格线不起作用,因为两个值必须属于同一类型。的 arghhh另外,目前他们是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");
}
});
数据的值是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)
}
}
答案 0 :(得分:1)
这里有一些问题。首先,传递给arrayToDataTable
构造函数的行不包含列标签行作为第一行,因此行[0,372]用于创建列标签。您需要包含列标签行,或者将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/