javascript - ZingChart 遵循了 mysql 教程，但我想要一个馅饼而不是一个酒吧

Question

我对所有这些东西都很陌生，这可能是一个简单的解决方案，但我无法弄清楚。我遵循了 ZingChart 的 mysql 教程，我能够看到我创建的条形图，但我想要一个饼图。

<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Pie Chart</h3>
                        </div>
                        <?php 
                            $sqlpie = "SELECT Naam,Voorraad FROM product WHERE Voorraad != 0";
                            $data = mysqli_query($con, $sqlpie);
                        ?>

                        <script>
                        var myData=[<?php 
                        while($info=mysqli_fetch_array($data))
                             echo $info['Voorraad'].','; /* We use the concatenation operator '.' to add comma delimiters after each data value. */
                        ?>];
                        <?php
                            $data=mysqli_query($con,"SELECT * FROM Product WHERE Voorraad !=0");
                        ?>
                            var myLabels=[<?php 
                            while($info=mysqli_fetch_array($data))
                            echo '"'.$info['Naam'].'",'; /* The concatenation operator '.' is used here to create string values from our database names. */
                        ?>];
                        </script>
                        <script>
                                 window.onload=function(){
                                    zingchart.render({
                                        id:"pieChart",
                                        width:"100%",
                                        height:400,
                                        data:{
                                        "type":"bar",
                                        "scale-x":{
                                            "labels":myLabels
                                        },
                                        "series":[
                                            {
                                                "values":myData

                                            }
                                    ]
                                    }
                                    });
                                    };
                    </script>

                        <div class="panel-body">
                            <div id="pieChart"></div>    
                        </div>
                    </div>
                </div>

            </div>

我想使用具有这种格式的派

"type":"pie3d",
"series":[
    {
        "text":"Apples",
        "values":[5]
    },
    {
        "text":"Oranges",
        "values":[8]
    },
    {
        "text":"Bananas",
        "values":[22]
    },
    {
        "text":"Grapes",
        "values":[16]
    },
    {
        "text":"Cherries",
        "values":[12]
    }
]

谁能帮帮我？

Answer 1

如果您能够获得条形图，那么您的 myData JavaScript 变量可能如下所示:

我的数据 = [98,12,36,76];

饼图中的每个饼图切片都需要在 series 中有自己的对象，并具有采用单个值数组的 values 属性。因此，如果您的 myData 数组中有四个值，您可以这样做:

var myData = [98,12,36,76];

window.onload=function(){
    zingchart.render({
        id:"pieChart",
        width:"100%",
        height:400,
        data:{
            "type":"pie",
            "series":[
                {
                    "values": [ myData[0] ]
                },
                {
                    "values": [ myData[1] ] 
                },
                {
                    "values": [ myData[2] ]
                },
                {
                    "values": [ myData[3] ]
                }
            ]
        }
    });
};

我是 ZingChart 团队的一员，请告诉我我可以提供任何帮助!