PHP如何包含饼图_Php_Charts_Visualization

PHP如何包含饼图

php charts

PHP如何包含饼图,php,charts,visualization,Php,Charts,Visualization,我正在写一份报告，它非常静态。我被要求将一些数字转换成饼图或酷图。所以我一直在看画布，但没能弄明白我使用的代码很简单 <tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>

我正在写一份报告，它非常静态。我被要求将一些数字转换成饼图或酷图。所以我一直在看画布，但没能弄明白

我使用的代码很简单

<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>
                            [/remove-if-empty]

[pagespeed.average.desktop]/100
[/如果为空，则删除]

输出非常基本

平均页面速度39/100

我想学习如何把它转换成一个饼图，并给它增添一点情趣。如果我知道它是如何结合在一起的，我可以用我认为的其他值来计算

有人能指引我吗

这是我的尝试：正如您所看到的，我对编码是新手

<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>

                                    <?php
                                    $dataPoints = array( 
                                        array("label"=>"Speed", "y"=>[pagespeed.average.desktop]),
                                        array("label"=>"Optimal", "y"=>100),
                                        )

                                    ?>
                                    <!DOCTYPE HTML>
                                    <html>
                                    <head>
                                    <script>
                                    window.onload = function() {


                                    var chart = new CanvasJS.Chart("chartContainer", {
                                        animationEnabled: true,
                                        title: {
                                            text: "Page Speed"
                                        },
                                        subtitles: [{
                                            text: "November 2017"
                                        }],
                                        data: [{
                                            type: "pie",
                                            yValueFormatString: "#,##0.00\"%\"",
                                            indexLabel: "{label} ({y})",
                                            dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
                                        }]
                                    });
                                    chart.render();

                                    }
                                    </script>
                                    </head>
                                    <body>
                                    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
                                    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
                            [/remove-if-empty]

[pagespeed.average.desktop]/100
window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
animationEnabled：没错，
标题：{
文本：“页面速度”
},
字幕：[{
正文：“2017年11月”
}],
数据：[{
键入：“馅饼”，
yValueFormatString:“#，##0.00\”%\”，
索引标签：“{label}（{y}）”，
数据点：
}]
});
chart.render（）；
}
[/如果为空，则删除]