0
私はajaxコールを使用して、キャンバスのjsスタックバーチャートにデータを取り込みます。しかし、それはエラーを投げている "canvasjs.min.js：102 Uncaught TypeError：未定義のプロパティ 'x'を読むことができません。以下は私のコードです。キャンバスJSのajaxコールの使用
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/assets/script/jquerymin.js"></script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var dps = [{x: 1, y: 10}];
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text:"Olympic Medals of all Times (till 2012 Olympics)"
},
animationEnabled: true,
legend: {
cursor:"pointer",
itemclick : function(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
},
axisY: {
title: "Medals"
},
toolTip: {
shared: true,
content: function(e){
var str = '';
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
console.log(e.entries[i].dataPoint.y);
var str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>";
str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
},
data: [
{
type: "bar",
showInLegend: true,
name: "Gold",
color: "gold",
dataPoints:dps[0]
},
{
type: "bar",
showInLegend: true,
name: "Silver",
color: "silver",
dataPoints:dps[1]
},
{
type: "bar",
showInLegend: true,
name: "Bronze",
color: "#A57164",
dataPoints:dps[2]
}
]
});
$.ajax({
url : "stackedcanvas.json",
success : function(result) {
var dataFromJSON = JSON.parse(result);
dps.splice(0, dps.length);
$.each(dataFromJSON, function (index, value) {
dps.push(value);
chart.render();
});
}
});
});
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
JSONファイルはここにある：
{
"gold": [{
"y": 198,
"label": "Italy"
}, {
"y": 201,
"label": "China"
}, {
"y": 202,
"label": "France"
}, {
"y": 236,
"label": "Great Britain"
}, {
"y": 395,
"label": "Soviet Union"
}, {
"y": 957,
"label": "USA"
}],
"silver": [{
"y": 166,
"label": "Italy"
}, {
"y": 144,
"label": "China"
}, {
"y": 223,
"label": "France"
}, {
"y": 272,
"label": "Great Britain"
}, {
"y": 319,
"label": "Soviet Union"
}, {
"y": 759,
"label": "USA"
}],
"bronze": [{
"y": 185,
"label": "Italy"
}, {
"y": 128,
"label": "China"
}, {
"y": 246,
"label": "France"
}, {
"y": 272,
"label": "Great Britain"
}, {
"y": 296,
"label": "Soviet Union"
}, {
"y": 666,
"label": "USA"
}]
}
私はJSONを検証してきた、そしてそれは正しいです。これは、フォーマット[Array [6]、Array [6]、Array [6]]の形式でデータを提供します。問題がどこにあるのか教えてください。何が間違っていますか？
ありがとうございました
すでに解析されているので、jqueryのajaxメソッドから取得したjsonを解析する必要はありません。それ以外に、私の他の推測は、あなたのjsonにxプロパティがなく、グラフコードがそのxを探しているということです。 – Daedalus
このエラーは次のようになります。 "jquerymin.js：2 Uncaught TypeError：パーズしないと 'in'演算子を使用して{80}を検索できません。 – Jaydeep
私はいくつかのエラーがあるように感じる - $。each（dataFromJSON、function（index、value）{ dps.push（value）; chart.render（）; }）; – Jaydeep