将标签添加到Google Chart

时间:2013-11-11 11:28:05

标签: javascript google-visualization

我一直试图让图表沿水平轴显示不同的标签。

我用过:

cols: [{id: '1', label: '00', type: 'number'},
    {id: '2', label: '01', type: 'number'},
    {id: '3', label: '02', type: 'number'}], 
// etc...

底部的数字应该代表几个小时,我需要它们从&00; 00'开始。结束于' 23' 有没有办法屏蔽它们/用指定值替换?

目前是图表:

Chart Stats

但它似乎并没有起作用:(

顺便说一下:我不能把它们发送到数组中,因为' 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)
                  }

}

1 个答案:

答案 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/