使用json和mysql php创建折线图

我正在使用数据库中的数据创建一个折线图，但我只得到一行作为count vs date。 我希望用户名为多行。我搜索了很多，但无法解决我的问题。在折线图中，我希望日期为x轴，计数为y轴，多行作为用户名。有人能帮我获取此信息吗？我将数据编码为json格式

<script type="text/javascript">
 $(document).ready(function(){
        $.ajax({
            url:"get_line_chart.php",
            type:'POST',
            success: function(output_string){ 

    var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'count');
    var json_data = $.parseJSON(output_string);
        var result = [];
    for(var i in json_data)
    result.push([i, json_data [i]]);
          data.addRows(result);
        // Set chart options
        var options = {'title':'',
                       'width':500,
                       'height':400};
        // Instantiate and draw our chart, passing in some options.
            var line= new google.visualization.LineChart(document.getElementById('line_chart'));
               line.draw(data, options);
                } 
            }); 

      });
      google.load('visualization', '1', {'packages':['corechart']});
  </script>

示例JSON数据：

{
    "2014-05-07": 10,
    "2014-05-27": 2,
    "2014-05-28": 3,
    "2014-05-23": 3,
    "2014-05-30‌​": 2,
    "2014-05-09": 11,
    "2014-05-16": 5,
    "2014-05-26": 2,
    "2014-05-22": 2,
    "2014-05-05": 2,
    "‌​2014-05-06": 1,
    "2014-05-08": 5,
    "2014-05-12": 5,
    "2014-05-13": 3,
    "2014-05-14": 6,
    "2014-0‌​5-19": 2
}

---

首先，您需要php中的数据，在获得值之后，您需要将其准备为google图表数据格式，因此您确实需要首先对其进行重构。我将只添加一个模拟查询示例select，因为您没有提供任何数据库获取。考虑这个例子：

get\u line\u chart.php

<?php

if(isset($_POST['get_chart'])) {
    // connect to database mysqli blah blah
    // sample select count, date from your table_name (this is just a sample!)
    // $query = mysqli_query($connection, 'SELECT count, date FROM table_name'); blah blah
    // while($row = $query->fetch_assoc()) {
    //     $result[] = $row; // blah
    // }
    $result = array(
        array('count' => 1, 'date' => '2014-05-07'),
        array('count' => 1, 'date' => '2014-05-21'),
        array('count' => 3, 'date' => '2014-05-01'),
        array('count' => 4, 'date' => '2014-05-15'),
        array('count' => 5, 'date' => '2014-05-14'),
        array('count' => 7, 'date' => '2014-05-01'),
        array('count' => 5, 'date' => '2014-05-09'),
    );

    // reformat the array and prep it for google chart
    // something like:
    // ['header1', 'header2'],
    // [-180, -300],
    // [-170, -50],
    // [-70, -30],
    // [150, 64],
    // [160, 256]

    $final = array();
    $headers = array_keys(reset($result));
    foreach($result as $key => $value) {
        $final[] = array(($value['date']), $value['count']);
    }

    // put the header and prepend it
    array_unshift($final, $headers);

    // output it
    echo json_encode($final);
    exit;
}

?>

HTML/JS/jQuery

<div id="chart_div" style="width: 900px; height: 500px;"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

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

function load_chart_data() {
    $.ajax({
        url: 'get_line_chart.php',
        type: 'POST',
        data: {get_chart: true},
        dataType: 'JSON',
        success: function(chart_values) {
            console.log(chart_values); // take a peek on the values (browser console)
            draw_chart(chart_values);
        }
    });
}

function draw_chart(chart_values) {
    var data = google.visualization.arrayToDataTable(chart_values);
    var options = { 
        title: 'Your super chart!',
        vAxis: {title: 'count', titleTextStyle: {italic: false}},
        hAxis: {title: 'date', titleTextStyle: {italic: false}},
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);    
}

</script>

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（加载图表数据）；
函数加载\图表\数据（）{
$.ajax({
url:'get_line_chart.php'，
键入：“POST”，
数据：{get_chart:true}，
数据类型：“JSON”，
成功：功能（图表\u值）{
console.log（图表_值）；//查看值（浏览器控制台）
绘制图表（图表值）；
}
});
}
函数绘制图表（图表值）{
var data=google.visualization.arrayToDataTable（图表值）；
变量选项={
标题：“你的超级图表！”，
变量：{title:'count'，titleTextStyle:{italic:false}，
hAxis:{title:'date'，titleTextStyle:{italic:false}，
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

output\u string@ammu的值可能会有帮助，您不应该在注释中发布这样的数据。你需要在你的问题中发布它，以便我们都能看到它。谢谢你的回复，但我想创建多个折线图。用户名作为线条，计数是y轴，日期是x轴。我不知道如何为3列排列json格式。我更新了我的php文件，请检查。@ammu我认为你不能在图表中放置用户名，我想它需要数据中的数值，@ammu试着摆弄我上面的答案，检查是否有可能在折线图中以线条形式显示用户名

<div id="chart_div" style="width: 900px; height: 500px;"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

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

function load_chart_data() {
    $.ajax({
        url: 'get_line_chart.php',
        type: 'POST',
        data: {get_chart: true},
        dataType: 'JSON',
        success: function(chart_values) {
            console.log(chart_values); // take a peek on the values (browser console)
            draw_chart(chart_values);
        }
    });
}

function draw_chart(chart_values) {
    var data = google.visualization.arrayToDataTable(chart_values);
    var options = { 
        title: 'Your super chart!',
        vAxis: {title: 'count', titleTextStyle: {italic: false}},
        hAxis: {title: 'date', titleTextStyle: {italic: false}},
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);    
}

</script>