带有列标签的 Mysql 到 Google 图表

Question

我正在尝试创建一个带有列标签的谷歌图表。以下对我来说很好。除了当我尝试将它与从 mysql 表创建的 Json 数据一起使用时。你们能帮我弄清楚我做错了什么吗？

工作谷歌图表代码：

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