Question

使用数据库中的数据创建折线图，但我只得到一行作为计数与日期。我想要用户名作为多行。我搜索了很多但是无法解决我的问题。在折线图中我希望日期为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>

mysql表结构

username   count    date
aaa         1       2014-05-07
aaa         1       2014-05-21
bbb         3       2014-05-01
bbb         4       2014-05-15
bbb         5       2014-05-14
ccc         7       2014-05-01
ccc         5       2014-05-09

示例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
}

Answer 1

首先，您需要来自php的数据，在获取值后，您需要为Google图表数据格式准备它，因此您确实需要先重新构建它。我只是添加一个模型查询示例选择，因为您没有提供任何数据库提取。考虑这个例子：

Sample Output

<强> get_line_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>

使用json和mysql php创建折线图

1 个答案: