首页 > 解决方案 > 无法使用 JSON 中的 chartjs 生成饼图

问题描述

我无法pie chart使用canvas.JS. 我已经通过循环迭代它们。
JSON 本身返回值如下

[[{"label":"belum","x":1},{"label":"sudah","x":5}]]  

我正在使用下面的代码来获取 JSON 数据。

<script type="text/javascript">
        $(document).ready(function () {
            
            var abc = [];
            
            $.getJSON("json/data_wilayah1.php", function (result) {
                
                for( var i = 0; i < result.length; i++) {
                    abc.push({ label: result[i].label, y: result[i].y });
                }
                
                var chart = new CanvasJS.Chart("chartContainer", {
                    animationEnabled: true,
                    title:{
                        text: "Ketersediaan Perangkat Jasa Akses Internet Redesain USO"
                    },    
                    toolTip:{
                    shared: true,
                    },
                    data: [
                        {
                            type:"pie",
                            name: "{label}",
                            legendText: "{label}",
                            showInLegend: true, 
                            toolTipContent: "{label}: <strong>{x}%</strong>",
                            indexLabel: "{label} - {x}%",
                            dataPoints: abc
                        }
                    ]
                });
                chart.render();
                
                }
            });
        });
</script>

标签: javascriptjsoncanvasjs

解决方案


我认为这只是循环中的一个错字。

abc.push({ label: result[i].label, y: result[i].y });

您的回复中有 Y 属性吗?

在您的 Json 响应中,它是 X,所以这个 result[i].y 将返回未定义。

我认为您正在提供未定义的值来协调。

这是一个不工作的

这是一个有效的(更新)


推荐阅读