canvasjs饼图从mysql获取数据

问题描述 投票:-1回答:1
$con = mysqli_connect("localhost","root","","final_osa");

if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();

    $result = mysqli_query($con, "SELECT * FROM scholars_list");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['course'], "y" => $row['student_name']);

        array_push($data_points, $point);        
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);

我怎样才能制作一个饼图,这个饼图可以使一个学生上有多少学生注册一个学者?谢谢

这是我的JS $(文件).ready(function(){

            $.getJSON("data.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    animationEnabled: true,
                    exportEnabled: true,
                    data: [
                        {
                            type: "pie",
                            showInLegend: "true",
                            legendText: "{label}",
                            indexLabelFontSize: 16,
                            indexLabel: "{label} - #percent%",
                            yValueFormatString: "฿#,##0",
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
            });
        });
php mysql canvasjs
1个回答
0
投票

格式化这样的数据

假设$记录包含您的数据:

$data=array();
foreach ($records as $record) {
    $data[] = array(
        "label"=>$record["student_name"],
        "y"=>$record['course'], //percentage value
    );
}
echo json_encode($data);

Js部分:

var chart = new CanvasJS.Chart("chartContainer", {
                title:{
                    text: "Monthly User work details"              
                },
                data: [              
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "pie",
                    showInLegend: "true",
                    legendText: "{label}",
                    indexLabelFontSize: 16,
                    indexLabel: "{label} - #percent%",
                    yValueFormatString: "฿#,##0",
                    dataPoints: JSON.parse(result)
                }
                ]
            });
            chart.render();
© www.soinside.com 2019 - 2024. All rights reserved.