Highcharts 错误：<rect> 属性 x：预期长度，“NaN”</rect>

Question

我正在尝试实现一个 highchart 3d 饼图，我从 api 获取数据，我迭代 json 并将该变量添加到字符串变量的 inchart 代码中，

我的 ajax 代码看起来像这样

$.ajax({
                url: 'http://localhost:8975/reporteMuros',
                type: 'GET',
                contentType: "application/json",
                success: function(data){

                    console.log(data);
                    var datos = '';
                    for (i = 0; i < data.length; i++){
                        datos  += "['"+data[i].region+"', "+data[i].total+"],";
                    }

                    console.log(datos);

                    Highcharts.chart('container', {
                        chart: {
                            type: 'pie',
                            options3d: {
                                enabled: true,
                                alpha: 45,
                                beta: 0
                            }
                        },
                        title: {
                            text: 'Muros por región'
                        },
                        accessibility: {
                            point: {
                                valueSuffix: '%'
                            }
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                depth: 35,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: 'Browser share',
                            data: [
                                datos 
                            ]
                        }]
                    });

                },
                error: function(jqXHR, textStatus, errorThrown){
                        console.log(jqXHR, textStatus, errorThrown);
                    }
            });

并在控制台中抛出此错误

但 ajax 响应和变量似乎很好

那么我该如何解决这个问题，或者是另一种将数据从 json 传递到图表的方法？

谢谢

Answer 1

Highcharts 要求series.data是一个数组，而不是一个字符串。

var datos = [];

for (i = 0; i < data.length; i++) {
    datos.push([data[i].region, data[i].total]);
}

---

现场演示： http://jsfiddle.net/BlackLabel/ska0cmr1/