Добавить ярлыки в Google Chart

Question

Я пытаюсь получить диаграмму для отображения другой метки для столбцов вдоль горизонтальной оси.

Я использовал:

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

Цифры вдоль дна должны представлять часов и мне они нужны, чтобы начать в «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] 
] 

var_dump от $ chartData является:

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) 
        } 

}

Answer 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 слишком широк и отсекает последнюю метку на диаграмме. Оставьте немного места в конце для метки «23», чтобы нарисовать, установив chartArea.width на номер 810 вместо '100%' (оставляя 10 пикселей в конце графика для рисования метки).

Смотрите эти исправления здесь: http://jsfiddle.net/asgallant/3AeC5/2/