Question

我在这里度过了一段时间，我如何从json_encoded mySQL数组中绘制图表？

数据检索（简单地从PDO查询关联的数组）：

    if($cCt > 0){
        header('Content-Type:application/json');    
        $table['cols'] = array(
                                array('id'=>'Date', 'label'=>'Date', 'type'=>'string'),
                                array('id'=>'Carbs', 'label'=>'Carbs', 'type'=>'number'),
                                array('id'=>'Sugar', 'label'=>'Sugar', 'type'=>'number'),
                                array('id'=>'Units', 'label'=>'Units', 'type'=>'number'));
        for($i=0; $i<$cCt; ++$i){
            $W = (isset($_GET['which'])) ? (int)$_GET['which'] : 0;
            switch($W){
                case 1: // weekly
                case 2: // monthly
                case 3: // yearly
                    $date = date('m/d', strtotime($CNums[$i]['Date']));
                    break;
                case 4: // daily
                    $date = date('m/d g:i a', strtotime($CNums[$i]['Date']));
                    break;
                default:
                    $date = date('m/d g:i a', strtotime($CNums[$i]['Date']));
                    break;
            }
            $rows[] = array('c'=>array('v'=>$date, 'v'=>$CNums[$i]['Carbs'], 'v'=>$CNums[$i]['Sugar'], 'v'=>$CNums[$i]['Units']));
        }
        $table['rows'] = $rows; 
        echo json_encode($table, JSON_NUMERIC_CHECK);
    }else{
        echo ErrorBox('Please login to see your charts.');
    }

代码尝试：

<script type="text/javascript">

    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var $dUrl = "/assets/php/charts/chart.data.php?_=<?php echo time(); ?>&which=<?php echo (isset($which)) ? $which : 4; ?>&d=<?php echo (isset($d)) ? $d : null; ?>&dl=<?php echo (isset($dl)) ? $dl : null; ?>";

        jQuery.getJSON($dUrl, function(d){
            // Create a new blank DataTable         
            var data = new google.visualization.DataTable(d);
            // Create our columns
            /*
            data.addColumn('date', 'Date');
            data.addColumn('number', 'Carbs');
            data.addColumn('number', 'Sugar');
            data.addColumn('number', 'Units');
            // Create our Rows
            jQuery.each(d, function(i) {
                data.addRows([d[i].Dates, d[i].Carbs, d[i].Sugar, d[i].Units]);
            }); 
            */      
            var options = {
                'colors': ['red', 'blue', 'yellow'],
                'width': '98%', 
                'height': 280, 
                'backgroundColor': 'none',
                'hAxis': {'textStyle': {fontName: 'Calibri', 
                    fontSize: '12'}},
                'vAxis': {'textStyle': {fontName: 'Calibri', 
                    fontSize: '12'}},
                'legendTextStyle': {fontName: 'Calibri', 
                    fontSize: '12'}
            };
            //var chart = new google.visualization.ColumnChart(document.getElementById('<?php echo $where; ?>'));
            var chart = new google.visualization.ColumnChart(document.getElementById('weekly_chart_div'));
            chart.draw(data, options);

        }).fail(function(msg){console.log('Error pulling in the data.' + msg);});

    }
</script>

来自$dUrl的原始JSON：

{"cols":[{"id":"Date","label":"Date","type":"string"},
    {"id":"Carbs","label":"Carbs","type":"string"},
    {"id":"Sugar","label":"Sugar","type":"string"},
    {"id":"Units","label":"Units","type":"string"}],
"rows":[["08\/23","40.0000000","256.0000000","9.0000000"],
    ["08\/24","33.8333333","102.5000000","4.6666667"],
    ["08\/25","38.2000000","290.2000000","10.6000000"],
    ["08\/26","36.0000000","322.0000000","12.0000000"],
    ["08\/28","23.6666667","348.3333333","9.6666667"],
    ["08\/29","31.3333333","214.1666667","7.3333333"],
    ["08\/30","16.0000000","154.0000000","4.0000000"]]}

数据检索更新后的新JSON：

{"cols":[{"id":"Date","label":"Date","type":"string"},
    {"id":"Carbs","label":"Carbs","type":"number"},
    {"id":"Sugar","label":"Sugar","type":"number"},
    {"id":"Units","label":"Units","type":"number"}],
"rows":[{"c":{"v":9}},{"c":{"v":4.6666667}},{"c":{"v":10.6}},{"c":{"v":12}},{"c":{"v":9.6666667}},{"c":{"v":7.3333333}},{"c":{"v":4}}]}

是的，现在我收到错误this.J[a].c is undefined，但它只显示应该加载图表的位置...而不是FireBug

我的目标是这样的：例如：http://o7th.com/Image3.png

Answer 1

您的行格式不正确。行是一个对象数组，其中每个对象都有一个“c”（单元格数组）和一个可选的“p”（属性对象）参数。单元格数组是具有“v”（列数据类型，单元格值）和可选“f”（字符串，单元格格式化值）和“p”（参数对象）属性的对象数组。

例如，您的第一行数据应如下所示：

{"c":[{"v":"08\/23"},{"v":40,"f":"40.0000000"},{"v":256,"f":"256.0000000"},{"v":9,"f":"9.0000000"}]}

为了从JSON编码的PHP数组生成，数组必须如下所示：

$row = array(
    'c' => array(
        array('v' => '08\/23'),
        array('v' => 40, 'f' => "40.0000000"),
        array('v' => 256, 'f' => "256.0000000"),
        array('v' => 9, 'f' => "9.0000000")
    )
);

默认情况下，MySQL将所有数字输出为字符串，因此您需要将它们转换为整数或浮点数，以便将它们作为数字输出，如下所示：

$foo = '33.333333'; // $foo == '33.333333'
$bar = (int) $foo; // $bar == 33
$cad = (float) $foo; // $cad == 33.333333

如果不需要，可以更改或删除格式化的值（它们将出现在图表的工具提示中）。

编辑：

你需要在cells数组中给每个单元格自己的数组;试试这个：

$rows[] = array(
    'c'=>array(
        array('v'=>$date),
        array('v'=>$CNums[$i]['Carbs']),
        array('v'=>$CNums[$i]['Sugar']),
        array('v'=>$CNums[$i]['Units'])
    )
);

来自MySQL JSON编码阵列的Google Charts

1 个答案: