2016-08-26 5 views
0

jsonデータを含むURL( "http://avare.pe.hu/veri2.json")からハイチャートグラフを作成しようとしています。しかし、データが検索されています(私はそれをコンソールに書き込むようにテストしました)。グラフは表示されません。私を助けてもらえますか? 私のデータは
[{"ADANA"、 "ADIYAMAN"、 "AFYONKARAHİSAR"、 "ANKARA"、 "BALIKESİR"、 "BİLECİK"、 "BURSA"、 "ÇANAKKALE"、 "EDİRNE"イスタンブール、キルクラエラ、コサエラ、サカリヤ、テカラダニ、ヤロウバ、カウント:[3,1,1,4,162,5,532,79,33,714,50,435,66,81,2 ]}] ..................ハイスコアグラフはjson URLからデータを取得します

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> 

答えて

1

私は固定データとの例を作って、あなたのコード内の1つの間違いを発見しました。 あなたのシリーズにデータを追加したい、しかし、あなたはあなたの系列オブジェクトが配列であることを忘れてしまったので、あなたは、このコードでそれを追加する必要があります:あなたはあなたのチャートはこれで動作する方法の例を見つけることができます。ここ

options.series[0].data = arr; 

修正: http://jsfiddle.net/worg6jLz/30/

関連する問題