javascript – ZingChart跟着mysql教程,但我想要一个馅饼而不是吧

我对所有这些东西都很新,这可能是一个简单的解决方案,但我无法弄清楚.我按照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>

我想使用具有此格式的Pie

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

有谁能够帮我？

解决方法:

如果你能得到一个条形图,那么你的myData JavaScript变量可能看起来像这样：

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

饼图中的每个饼图切片都需要在系列中拥有自己的对象,其value属性采用单个值数组.因此,如果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团队,所以让我知道我可以做任何其他事情来帮助你！

标签：json,javascript,mysql,pie-chart,zingchart
来源： https://codeday.me/bug/20190623/1273807.html