2017-06-27 10 views
0

私は円グラフを生成する次のコードを持っています。私は外部のjsonファイルを呼び出して円グラフを生成しています。 何らかの理由により。それは円グラフを生成しません。何が欠けているのか、間違っているのですか?ここで外部JSONから円グラフを作成しない

以下の私のコードです:

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 

JAVASCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 

     <!-- high chart libarary --> 

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-3d.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

    <script> 


    var options = { 
     chart: { 
     renderTo: 'container', 
     type: 'pie', 
     options3d: { 
      enabled: true, 
      alpha: 15, 
      beta: 15, 
      depth: 50, 
      viewDistance: 25 
     } 
     }, 
     title: { 
     text: '', 
     }, 
     subtitle: { 
     text: '', 
     }, 
     xAxis: { 
     categories: [] 

     }, 
     yAxis: { 
     enabled: false, 
     title: { 
      text: 'Amount' 
     }, 
     labels: { 
      //       formatter:function() { 
      //        return Highcharts.numberFormat(this.value, 0, '', ','); 
      //       } 
      //      ,enabled: false 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
     }, 
     tooltip: { 
     formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
      this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ','); 
     } 
     }, 
     credits: { 
     enabled: false 
     }, 
     plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      depth: 35, 
      dataLabels: { 
      enabled: true, 
      format: '{point.name}' 
      } 
     } 
     }, 
     legend: { 
     enabled: false 
     }, 

     series: [{}] 
    } 

    setTimeout(function() { 

      $.getJSON("pie.json", function(json) { 
//    options.xAxis.categories = json[0]['data']; 
//    options.series[0] = json[1]; 
//    options.series[1] = json[2]; 
//    chart = new Highcharts.Chart(options); 
        // debugger 
       console.log(json); 
       alert(json); 

     options.series[0].data = json 
     chart = new Highcharts.Chart(options); 
      }); 





    }, 0) 


    </script> 

JSON - 私たちはパイJSONデータをIとしてtransfromが必要are.The pie.jsonここ

[{ 
     name: 'Microsoft Internet Explorer', 
     y: 56.33 
    }, { 
     name: 'Chrome', 
     y: 24.03, 
     sliced: true, 
     selected: true 
    }, { 
     name: 'Firefox', 
     y: 10.38 
    }, { 
     name: 'Safari', 
     y: 4.77 
    }, { 
     name: 'Opera', 
     y: 0.91 
    }, { 
     name: 'Proprietary or Undetectable', 
     y: 0.2 
}] 
+0

あなたがヘッド部にjQueryライブラリを追加しましたか?どのようなエラーコンソールにありますか? – liontass

+0

@liontassはいjqueryはあります。それは何の誤りも与えない。それは何らかの理由で円グラフをレンダリングしないだけです。 – user244394

+0

F12、コンソールには何がありますか? – mkaatman

答えて

2

あなたを以下に示す:

var options = { 
 
     chart: { 
 
     renderTo: 'container', 
 
     type: 'pie', 
 
     options3d: { 
 
      enabled: true, 
 
      alpha: 15, 
 
      beta: 15, 
 
      depth: 50, 
 
      viewDistance: 25 
 
     } 
 
     }, 
 
     title: { 
 
     text: '', 
 
     }, 
 
     subtitle: { 
 
     text: '', 
 
     }, 
 
     xAxis: { 
 
     categories: [] 
 

 
     }, 
 
     yAxis: { 
 
     enabled: false, 
 
     title: { 
 
      text: 'Amount' 
 
     }, 
 
     labels: { 
 
      //       formatter:function() { 
 
      //        return Highcharts.numberFormat(this.value, 0, '', ','); 
 
      //       } 
 
      //      ,enabled: false 
 
     }, 
 
     plotLines: [{ 
 
      value: 0, 
 
      width: 1, 
 
      color: '#808080' 
 
     }] 
 
     }, 
 
     tooltip: { 
 
     formatter: function() { 
 
      return '<b>' + this.series.name + '</b><br/>' + 
 
      this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ','); 
 
     } 
 
     }, 
 
     credits: { 
 
     enabled: false 
 
     }, 
 
     plotOptions: { 
 
     pie: { 
 
      allowPointSelect: true, 
 
      cursor: 'pointer', 
 
      depth: 35, 
 
      dataLabels: { 
 
      enabled: true, 
 
      format: '{point.name}' 
 
      } 
 
     } 
 
     }, 
 
     legend: { 
 
     enabled: false 
 
     }, 
 

 
     series: [{type:"pie"}] 
 
    } 
 

 
    setTimeout(function() { 
 

 
      $.getJSON("pie.json", function(json) { 
 
       console.log(json); 
 
       alert(json); 
 

 
     options.series[0].data = json; 
 
     chart = new Highcharts.Chart(options); 
 
      }); 
 

 

 

 

 

 
    }, 0);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
     <!-- high chart libarary --> 
 

 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-3d.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
</head> 
 
<body> 
 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 
 

 
</body></html>
pie..json
[{ 
 
     "name": "Microsoft Internet Explorer", 
 
     "y": 56.33 
 
    }, { 
 
     "name": "Chrome", 
 
     "y": 24.03, 
 
     "sliced": true, 
 
     "selected": true 
 
    }, { 
 
     "name":"Firefox", 
 
     "y": 10.38 
 
    }, { 
 
     "name":"Safari", 
 
     "y": 4.77 
 
    }, { 
 
     "name":"Opera", 
 
     "y": 0.91 
 
    }, { 
 
     "name": "Proprietary or Undetectable",   
 
     "y": 0.2 
 
}]

関連する問題