首页 文章

将标签添加到Google Chart

提问于
浏览
0

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

我用过:

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

底部的数字应该代表数小时,我需要它们从'00'开始并在'23'结束 Is there a way to mask them/ replace with specified values?

这是目前的图表:

Chart Stats

但它似乎没有工作:(

顺便说一句:我不能将它们作为'00'等发送到数组中,因为发生这种情况:Uncaught Error: Not a valid 2D array即使我将其更改为字符串,因为网格线不起作用,因为两个值必须属于同一类型 . arghhh

此外,目前他们是1-22号,当时他们也应该是1-23 - Any ideas why it is missing off the last value?

Edit

这是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 回答

  • 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%' (在图表的末尾留下10个像素以绘制标签),在末尾留出一点空间以绘制"23"标签 .

    请在此处查看以下修复:http://jsfiddle.net/asgallant/3AeC5/2/

相关问题