Flot饼图从数据库中获取数据

时间:2013-04-09 05:23:21

标签: php javascript mysql jquery flot

您好我正在尝试从mysql数据库中检索数据以创建flot饼,我的数据看起来像这样

数组中的数据

  

$ Array = array();

     

$ Array [0] = array();      $ Array [1] = array();      $ Array [2] = array();

     

$ Array [0] ['label'] ='A级';      $ Array [1] ['label'] ='B级';      $ Array [2] ['label'] ='C级';

     

$ Array [0] ['color'] ='#89A54E';      $ Array [1] ['color'] ='#AA4643';      $ Array [2] ['color'] ='#4572A7';

     

$ Array [0] ['data'] [0] = array(1,700);      $ Array [1] ['data'] [0] = array(1,500);      $ Array [2] ['data'] [0] = array(1,600);

     

echo json_encode($ Array);

和这个mysql

$server = "localhost";
$user="root";
$password="";
$database = "db_test";

$connection = mysql_connect($server,$user,$password);
$db = mysql_select_db($database,$connection);

$query = "SELECT * FROM pie";
$result = mysql_query($query);        

while ($record = mysql_fetch_assoc($result)) {
    $event_array[] = array(
        'label' => $record['label'],
        'color' => $record['color'],
        'data' => $record['data']
    );
}

echo json_encode($event_array);

我的flot js

    $.ajax
({
    type:'POST', 
    dataType: 'JSON', 
    url:'data.php',
    success: function(data) 
    {    
        $.plot($('#Pie'), data, 
        {
            series: 
            {
                pie: 
                {
                    show: true,
                    innerRadius: 0.4,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 1,
                        formatter: function(label, series) 
                        {
                            return "<div style='font-size:11px; text-align:center; padding:2px; color:white;'>"+label+"<br/>"
                            +Math.round(series.percent)+"%</div>";
                        },

                        background: 
                        {
                            opacity: 0.8
                        }
                    }
                }
            },

            grid: 
            {
                hoverable: true
            },

            legend: 
            {
                show: false
            }
        });
    }
});

它不会显示任何内容,是否有人可以帮助我。

0 个答案:

没有答案