MySQL到谷歌圖表與列標簽

Question

我正在嘗試創建帶有列標簽的Google圖表。 以下工作對我來說很好。 除了當我嘗試將其與從mysql表創建的Json數據一起使用時。 你們能幫我理解我做錯了什么嗎？

有效的Google圖表代碼：

<script type="text/javascript">
    function drawVisualization() {

    var data = google.visualization.arrayToDataTable([
        ['From', 'TotalOrders', 'Quantity'],
        ['Wk of 9/7/14', 172, 8910],
        ['Wk of 9/14/14', 121, 5901],
        ['Wk of 9/21/14', null, null],
        ['Wk of 9/28/14', null, null]
    ]);


    var formatter = new google.visualization.NumberFormat( {pattern:'#,###'});
    formatter.format(data, 1);
    formatter.format(data, 2);

    mydiv = $("#mychart");
    chart = new google.visualization.ComboChart(mydiv[0]);
    chart.draw(data, {
        width: 600, height: 400, seriesType: 'bars',
        chartArea: {left: 60, top: 30, width: 540}
    });    


    rects = mydiv.find('svg > g > g > g > rect');
    var row = 0;
    for (i = 0; i < rects.length; i++) {

        el = $(rects[i]);
        if (parseFloat(el.attr("height")) <= 2) { continue; }
        aparent = el.parent();
        do { // skips 'null' values
            text = data.getValue(row++, 1);
        } while (text == null && row < data.getNumberOfRows());

        if (text) {
            text = formatter.formatValue(text);
            // see below
            pos = getElementPos(el);
            attrs = {x: pos.x + pos.width / 2, y: pos.y - 2,
                fill: 'black',
                'font-family': 'Arial', 'font-size': 11,
                'text-anchor': 'middle'};
            aparent.append(addTextNode(attrs, text, aparent));
        }
    }
}


google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);

function getElementPos($el) {
    return {
        x: parseInt($el.attr("x")),
        width: parseInt($el.attr("width")),
        y: parseInt($el.attr("y")),
        height: parseInt($el.attr("height"))
    }
}


function addTextNode(attrs, text, _element) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', "text");
    for (var k in attrs) { el.setAttribute(k, attrs[k]); }
    var textNode = document.createTextNode(text);
    el.appendChild(textNode);
    return el;
}

</script>

但是當我將其與以下內容一起使用時，它將無法正常工作。

$table = array();
$table['cols'] = array(
    array('label' => 'From', 'type' => 'string'),
    array('label' => 'TotalOrders', 'type' => 'number'),
    array('label' => 'Quantity', 'type' => 'Number')
);

$rows = array();
while($r = mysql_fetch_assoc($sth)) {
    $temp = array();
    $temp[] = array('v' => (string) $r['From']); 
    $temp[] = array('v' => (int) $r['TotalOrders']); 
    $temp[] = array('v' => (int) $r['Quantity']); 
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);

我似乎在這里找不到問題所在。 也許你們可以為我指出正確的方向。

Answer 1

該JSON結構與arrayToDataTable函數不兼容-您必須使用常規的DataTable構造函數：

var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

另外，您應該讓json_encode函數正確解析輸出中的數字，否則它們可能會以字符串形式出現：

$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);