Question

我尝试从包含json数据的url（“http://avare.pe.hu/veri2.json”）创建一个高图表图表。但是通过数据检索（我将其测试为将其写入控制台）图形不会显示。你能帮我吗？我的数据是
[{ “名称”：[ “ADANA”， “阿德亚曼”， “的Afyonkarahisar”， “安卡拉”， “巴勒克西尔”， “比莱吉克”， “BURSA”， “恰纳卡莱”， “埃迪尔”， “İSTANBUL”， “克尔克拉雷” “科贾埃利”， “萨卡里亚”， “泰基尔达”， “亚洛瓦”]， “计数”：[3,1,1,4,162,5,532,79,33,714,50,435,66,81,2]}] ..................

The web page
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pasta HighChart Grafiği</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {       

            var jsonurl = "http://avare.pe.hu/veri2.json";    
            var chart;

            $.getJSON(jsonurl, function (json) {    

                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'pie',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false    
                    },

                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories:[],
                        //type: 'category',
                        labels: {
                            rotation: -45,
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer', size: 160,
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true,


                            dataLabels: {
                                enabled: true, connectorWidth: 2, connectorPadding: 1,
                                format: '<span style="font-size:14px; font-weight:bold">{point.percentage:.1f} %</span>',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    tooltip: {
                        pointFormat: 'Miktar, <b>{point.y:.1f} kton</b>'
                    },    

                    series: [{
                        type:'pie',
                        data: []
                    }]
                }    

              //  options.series[0] = {};
               // options.series[0].name = json[0]['names'];
                // options.series[0].data = json[0]['count'];
                var names = json[0]['names'];
                var count = json[0]['count'];
        var arr=new Array(names.length);
                console.log(names[0]);
               for (i = 0 ; i < name.length; i++) {
                   arr[i] = [names[i],count[i]];
               }
                options.series.data = arr;
                chart = new Highcharts.Chart(options);
            });              
            });   

    </script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Answer 1

我用固定数据做了一个例子，发现代码中有一个错误。您想要将数据添加到系列中，但是您忘记了系列对象是一个数组，因此您应该使用以下代码添加它：

  options.series[0].data = arr;

在这里，您可以找到一个示例，了解您的图表如何与此更正一起使用：http://jsfiddle.net/worg6jLz/30/

高图图表从json url

1 个答案: