Javascript 谷歌图表&x2B；mysqli不是'；t形图

我试图画一个谷歌图表，但它不起作用

我创建了一个php脚本来从mysql获取数据并构建一个数组，然后编码成json，结果是

[“mes ano”，“num trabalhos”]，[“Janeiro”，56]，“fevereiro”，36]，“Mar\u00e7o”，39]，“Abril”，52]，“Maio”，38]，“Junho”，62]，“Julho”，53]，“Agosto”，43]

getData.php

他们试图画出图表

在主php文件中，我加载了js文件，我有google提供的代码

有人能告诉我我做错了什么吗

致以最诚挚的问候

希望JSON数据以以下格式提供：

var jsonData = {
                "cols": [
                    { "id": "", "label": "mes ano", "pattern": "", "type": "string" },
                    { "id": "", "label": "num trabalhos", "pattern": "", "type": "number" }
                ],
                "rows": [
                    { "c": [{ "v": "Janeiro", "f": null }, { "v": 56, "f": null }] },
                    { "c": [{ "v": "fevereiro", "f": null }, { "v": 36, "f": null }] },
                    { "c": [{ "v": "Mar\u00e7o", "f": null }, { "v": 39, "f": null }] },
                    { "c": [{ "v": "Abril", "f": null }, { "v": 52, "f": null }] },
                    { "c": [{ "v": "Maio", "f": null }, { "v": 38, "f": null }] },
                    { "c": [{ "v": "Junho", "f": null }, { "v": 62, "f": null }] },
                    { "c": [{ "v": "Julho", "f": null }, { "v": 53, "f": null }] },
                    { "c": [{ "v": "Agosto", "f": null }, { "v": 43, "f": null }] }
                ]
            };

{
                "cols": [
                    { "id": "", "label": "mes ano", "pattern": "", "type": "string" },
                    { "id": "", "label": "num trabalhos", "pattern": "", "type": "number" }
                ],
                "rows": [
                    { "c": [{ "v": "Janeiro", "f": null }, { "v": 56, "f": null }] },
                    { "c": [{ "v": "fevereiro", "f": null }, { "v": 36, "f": null }] },
                    { "c": [{ "v": "Mar\u00e7o", "f": null }, { "v": 39, "f": null }] },
                    { "c": [{ "v": "Abril", "f": null }, { "v": 52, "f": null }] },
                    { "c": [{ "v": "Maio", "f": null }, { "v": 38, "f": null }] },
                    { "c": [{ "v": "Junho", "f": null }, { "v": 62, "f": null }] },
                    { "c": [{ "v": "Julho", "f": null }, { "v": 53, "f": null }] },
                    { "c": [{ "v": "Agosto", "f": null }, { "v": 43, "f": null }] }
                ]
            };

基本上你有两个选择

选项1

修改PHP处理程序以以下格式返回数据：

var jsonData = {
                "cols": [
                    { "id": "", "label": "mes ano", "pattern": "", "type": "string" },
                    { "id": "", "label": "num trabalhos", "pattern": "", "type": "number" }
                ],
                "rows": [
                    { "c": [{ "v": "Janeiro", "f": null }, { "v": 56, "f": null }] },
                    { "c": [{ "v": "fevereiro", "f": null }, { "v": 36, "f": null }] },
                    { "c": [{ "v": "Mar\u00e7o", "f": null }, { "v": 39, "f": null }] },
                    { "c": [{ "v": "Abril", "f": null }, { "v": 52, "f": null }] },
                    { "c": [{ "v": "Maio", "f": null }, { "v": 38, "f": null }] },
                    { "c": [{ "v": "Junho", "f": null }, { "v": 62, "f": null }] },
                    { "c": [{ "v": "Julho", "f": null }, { "v": 53, "f": null }] },
                    { "c": [{ "v": "Agosto", "f": null }, { "v": 43, "f": null }] }
                ]
            };

{
                "cols": [
                    { "id": "", "label": "mes ano", "pattern": "", "type": "string" },
                    { "id": "", "label": "num trabalhos", "pattern": "", "type": "number" }
                ],
                "rows": [
                    { "c": [{ "v": "Janeiro", "f": null }, { "v": 56, "f": null }] },
                    { "c": [{ "v": "fevereiro", "f": null }, { "v": 36, "f": null }] },
                    { "c": [{ "v": "Mar\u00e7o", "f": null }, { "v": 39, "f": null }] },
                    { "c": [{ "v": "Abril", "f": null }, { "v": 52, "f": null }] },
                    { "c": [{ "v": "Maio", "f": null }, { "v": 38, "f": null }] },
                    { "c": [{ "v": "Junho", "f": null }, { "v": 62, "f": null }] },
                    { "c": [{ "v": "Julho", "f": null }, { "v": 53, "f": null }] },
                    { "c": [{ "v": "Agosto", "f": null }, { "v": 43, "f": null }] }
                ]
            };

选项2

使用JavaScript将数据转换为

DataTable

JSON数据格式，如下所示：

//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
/*var jsonData=$.ajax({
url:“getData.php”，
数据类型：“json”，
异步：false
}).responseText*/
var jsonData=[“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，“我的爱”，我的爱你；
var formattedJsonData={
“cols”：[]，
“行”：[]
};
forEach（函数（第i项）{
如果（i==0）{
formattedJsonData.cols=[
{“id”：“label”：“mes ano”，“pattern”：“type”：“string”}，
{“id”：“label”：“num trabalhos”，“pattern”：“type”：“number”}
];
}
否则{
formattedJsonData.rows.push（{“c”：[{“v”：项[0]，“f”：空}，{“v”：项[1]，“f”：空}]}）；
}
});
//使用从服务器加载的JSON数据创建我们的数据表。
var data=new google.visualization.DataTable（formattedJsonData）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
绘制图表（数据，{宽度：400，高度：240}）；
}

---

您可以尝试一下，但这不需要使用ajax：

<?php
$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%1-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $janeiro = 0;           
    while($row = $result->fetch_assoc()) {
        $janeiro = $janeiro + 1;
    }
    $data[0] = array('Janeiro', $janeiro);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%2-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $fevereiro = 0;         
    while($row = $result->fetch_assoc()) {
        $fevereiro = $fevereiro + 1;
    }
    $data[1] = array('fevereiro', $fevereiro);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%3-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $marco = 0;         
    while($row = $result->fetch_assoc()) {
        $marco = $marco + 1;
    }
    $data[2] = array('Março', $marco);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%4-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $abril = 0;         
    while($row = $result->fetch_assoc()) {
        $abril = $abril + 1;
    }
    $data[3] = array('Abril', $abril);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%5-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $maio = 0;          
    while($row = $result->fetch_assoc()) {
        $maio = $maio + 1;
    }
    $data[4] = array('Maio', $maio);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%6-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $junho = 0;         
    while($row = $result->fetch_assoc()) {
        $junho = $junho + 1;
    }
    $data[5] = array('Junho', $junho);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%7-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $julho = 0;         
    while($row = $result->fetch_assoc()) {
        $julho = $julho + 1;
    }
    $data[6] = array('Julho', $julho);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%8-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $agosto = 0;            
    while($row = $result->fetch_assoc()) {
        $agosto = $agosto + 1;
    }
    $data[7] = array('Agosto', $agosto);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%9-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $setembro = 0;          
    while($row = $result->fetch_assoc()) {
        $setembro = $setembro + 1;
    }
    $data[8] = array('Setembro', $setembro);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%10-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $outubro = 0;           
    while($row = $result->fetch_assoc()) {
        $outubro = $outubro + 1;
    }
    $data[9] = array('Outubro', $outubro);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%11-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $novembro = 0;          
    while($row = $result->fetch_assoc()) {
        $novembro = $novembro + 1;
    }
    $data[10] = array('Novembro', $novembro);
}

$query = "SELECT data_pedido FROM `gestao_netflow`.`trabalhos` WHERE data_pedido LIKE '%12-2015%'";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $dezembro = 0;          
    while($row = $result->fetch_assoc()) {
        $dezembro = $dezembro + 1;
    }
    $data[11] = array('Dezembro', $dezembro);
}
?>

然后是图表：

<div class="hellcontainer">
    <div id="chart_div"></div>
</div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
google.load("visualization","1",{packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'mes ano');
    data.addColumn('number', 'num trabalhos');
    data.addRows(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>);

    var options = {'title':'Month Count',
                           'width':400,
                           'height':300};

    var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data,options);

}
</script>

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）
{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'mes ano'）；
data.addColumn（'number'，'num trabalhos'）；
data.addRows（）；
var options={'title'：'Month Count'，
“宽度”：400，
‘高度’：300}；
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
}

这可能有很多方面，您需要提供您的代码供任何人帮助，因为它可能像打字一样简单：）@hmrneves请提供您的完整代码，没有它很难知道您做错了什么。您好，谢谢您的回答，所以基本上我在构建一个糟糕的数组，而json_encode函数无法正确构建它？是否有任何解决方案可以在php中构建适当的数组，以便json可以读取？没错，json数据的格式与DataTable json数据格式不兼容。说到这里，您可以修改

$data

的初始化，或者像我的示例hmm中演示的那样对其进行转换，我需要弄清楚php如何将数组返回给jsonData函数，因为它是一个从mysql获取数据的动态图表，然后构建图表。所以我可以用json编码数组，必须是php的…谢谢你，克里斯托，我遵循了你的提示，工作得很好。当做

<div class="hellcontainer">
    <div id="chart_div"></div>
</div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
google.load("visualization","1",{packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'mes ano');
    data.addColumn('number', 'num trabalhos');
    data.addRows(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>);

    var options = {'title':'Month Count',
                           'width':400,
                           'height':300};

    var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data,options);

}
</script>