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>