下面的代码尝试显示最流行表单的摘要，这些表单由各自数据库表中插入的行数定义，并通过chart.js 2.8将其显示为饼图。

<div class="tab-pane fade show active" id="FormsSubmitted" role="tabpanel" aria-labelledby="FormsSubmitted-tab">
        <div>
            <canvas class="my-4 w-100" style="height: 100%;" id="popforms"></canvas>
        </div>
            
        
        <?php
        // query to get the number of rows for each table with prefix "prism_formdata_"
        $GetFormPopularityQuery = "SELECT REPLACE(table_name, 'prism_formdata_', '') AS form_name, table_rows AS num_rows 
        FROM information_schema.tables 
        WHERE table_schema = 'general' AND table_name LIKE 'prism_formdata_%';";
        // execute the query and get the result
        $GetFormPopularityResult = $mysqli->query($GetFormPopularityQuery);

        // create an empty array to hold the chart data
        $data = array('labels' => array(), 'datasets' => array(array('data' => array())));

        
        // loop through the result and add the data to the chart array
        while ($GetFormPopularityRow = $GetFormPopularityResult->fetch_assoc()) {
            $data['labels'][] = $GetFormPopularityRow['form_name'];
            $data['datasets'][0]['data'][] = $GetFormPopularityRow['num_rows'];
        }
        $labellist = array();
        foreach($labellist as $key -> $value){
            $labellist[] = '\''.$value.'\'';
        }
        $labellist = implode(',',$labellist);
        echo $labellist;
        // convert the chart data to JSON format
        $json_data = json_encode($data);
        //num of rows uses to calculate chart colors in script below.
        $formscount = mysqli_num_rows($GetFormPopularityResult);
        ?>
        <script>
            //when the page/files have finished loading...
            window.onload = function() {

                $(window).resize(function() {
                    popforms.resize();
                });

            // Set the colors to be used for the chart pie segments.
            var colors = ['rgba(76, 18, 161, 1)', 'rgba(229, 0, 109, 1)', 'rgba(205, 216, 223, 1)', 'rgba(76, 18, 161, 0.8)', 'rgba(229, 0, 109, 0.8)', 'rgba(205, 216, 223, 0.8)', 'rgba(76, 18, 161, 0.6)', 'rgba(229, 0, 109, 0.6)', 'rgba(205, 216, 223, 0.6)', 'rgba(76, 18, 161, 0.4)', 'rgba(229, 0, 109, 0.4)', 'rgba(205, 216, 223, 0.4)', 'rgba(76, 18, 161, 0.2)', 'rgba(229, 0, 109, 0.2)', 'rgba(205, 216, 223, 0.2)'];
            var bgColors = [];
                for (var i = 0; i < <?php echo $formscount;?>; i++) {
                    bgColors.push(colors[i % colors.length]);  
                }
                
                // get the chart data from PHP script
                var chart_data = <?php echo $json_data; ?>;
                //get the chart labels from the PHP script
                //var labellist = <?php //echo $labellist; ?> //didnt work

                // create a new pie chart
                console.table('bgColors is: '+bgColors);
                console.dir(chart_data);
                var ctx = document.getElementById('popforms').getContext('2d');
                var popforms = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        datasets: [{
                            label: 'Form Popularity',
                            data: chart_data,
                            backgroundColor: bgColors // Use the array of colors
                        }],
                        labels: chart_data.labels // Use the labels from the chart data
                    },
                    options: {
                        responsive: true
                    }
                                            });
                                        }

        </script>
    </div>

它几乎看起来工作，但画布是空的保存标签显示在顶部正确，与正确的颜色和名称，但文本为每个标签有一个删除线的影响。
如果我查看浏览器控制台，我可以看到我的调试显示chart_data在那里，看起来像我认为的预期格式，看起来像这样：

datasets
: 
Array(1)
0
: 
data
: 
(20) ['35', '0', '2', '14', '8', '13', '0', '0', '2', '4', '0', '4', '4', '0', '0', '2', '0', '4', '34', '4']
[[Prototype]]
: 
Object
length
: 
1
[[Prototype]]
: 
Array(0)
labels
: 
(20) [<list of strings in a comma separated list, each enclosed in a single quote here, removed because I don't want to publicly show the data.>]
pop
: 
ƒ ()
push
: 
ƒ ()
shift
: 
ƒ ()
splice
: 
ƒ ()
unshift
: 
ƒ ()
_chartjs
: 
{listeners: Array(1)}
[[Prototype]]
: 
Object

Chart.js是2.8版本，并且正在正确加载到页面上，我知道这一点是因为在我开始尝试向图表段/标签添加颜色之前，图表一直工作，所以我可能在语法上搞砸了一些东西，但我看不到它是什么。
注：我的代码是示例的组合，搜索Stackoverflow/Google和Chartjs文档，但我承认我不是100%流利。您可能会注意到其中一些用于调试目的的行，在这一点上也不是100%必要的。