Javascript 使用ajax调用canvasjs
我使用ajax调用获取数据以填充canvas js stackedbar图表。但它抛出了一个错误“canvasjs.min.js:102 uncaughttypeerror:无法读取未定义的属性“x”。下面是我的代码Javascript 使用ajax调用canvasjs,javascript,jquery,ajax,canvas,chart.js,Javascript,Jquery,Ajax,Canvas,Chart.js,我使用ajax调用获取数据以填充canvas js stackedbar图表。但它抛出了一个错误“canvasjs.min.js:102 uncaughttypeerror:无法读取未定义的属性“x”。下面是我的代码 <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="/assets/script/jquerymin.js"
<!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,它是正确的。它以[Array[6]、Array[6]、Array[6]的格式提供数据。请告诉我问题在哪里,我做错了什么
谢谢明白了!不得不在ajax调用中制作图表
<script type="text/javascript">
$(document).ready(function(){
var dps = [{x: 1, y: 10}];
$.ajax({
url : "stackedcanvasjson.json",
success : function(result) {
var dataFromJSON = JSON.parse(result);
dps.splice(0, dps.length);
$.each(dataFromJSON, function (index, value) {
dps.push(value);
});
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: "CR",
color: "#1f77b4",
dataPoints:dps[0]
},
{
type: "bar",
showInLegend: true,
name: "TR",
color: "#2ca02c",
dataPoints:dps[1]
},
{
type: "bar",
showInLegend: true,
name: "IR",
color: "#f52887",
dataPoints:dps[2]
},
{
type: "bar",
showInLegend: true,
name: "PTR",
color: "#5afffa",
dataPoints:dps[3]
},
{
type: "bar",
showInLegend: true,
name: "WO",
color: "#9b14e7",
dataPoints:dps[4]
}
]
});
chart.render();
}
});
});
</script>
$(文档).ready(函数(){
var-dps=[{x:1,y:10}];
$.ajax({
url:“stackedcanvasjson.json”,
成功:功能(结果){
var dataFromJSON=JSON.parse(结果);
dps拼接(0,dps长度);
$.each(dataFromJSON,函数(索引,值){
dps.push(值);
});
var chart=new CanvasJS.chart(“chartContainer”{
标题:{
文字:“历届奥运会奖牌(至2012年奥运会)”
},
animationEnabled:没错,
图例:{
光标:“指针”,
项目点击:功能(e){
if(typeof(e.dataSeries.visible)==“undefined”| | e.dataSeries.visible){
e、 dataSeries.visible=false;
}
否则{
e、 dataSeries.visible=true;
}
chart.render();
}
},
axisY:{
标题:“奖牌”
},
工具提示:{
分享:是的,
内容:职能(e){
var-str='';
var合计=0;
var-str3;
var-str2;
对于(变量i=0;i”+e.entries[i]。dataPoint.y+“
”;
总计=e.entries[i].dataPoint.y+total;
str=str.concat(str1);
}
str2=“”+e.entries[0].dataPoint.label+”
”;
str3=“总计:”+Total+”
”;
返回(str2.concat(str)).concat(str3);
}
},
数据:[
{
输入:“酒吧”,
showInLegend:是的,
名称:“CR”,
颜色:“1f77b4”,
数据点:dps[0]
},
{
输入:“酒吧”,
showInLegend:是的,
名称:“TR”,
颜色:“2ca02c”,
数据点:dps[1]
},
{
输入:“酒吧”,
showInLegend:是的,
名称:“IR”,
颜色:#f52887“,
数据点:dps[2]
},
{
输入:“酒吧”,
showInLegend:是的,
名称:“PTR”,
颜色:“5afffa”,
数据点:dps[3]
},
{
输入:“酒吧”,
showInLegend:是的,
姓名:"WO",,
颜色:“9b14e7”,
数据点:dps[4]
}
]
});
chart.render();
}
});
});
您不需要解析从jquery的ajax方法检索到的json,因为它已经被解析了。除此之外,我的另一个猜测是,您的json中没有x属性,图形代码正在查找该x。它给出了一个错误--“jquerymin.js:2 Uncaught TypeError:如果我不解析它,就不能使用'in'运算符在{…}中搜索'804'{dps.push(value);chart.render();});
<script type="text/javascript">
$(document).ready(function(){
var dps = [{x: 1, y: 10}];
$.ajax({
url : "stackedcanvasjson.json",
success : function(result) {
var dataFromJSON = JSON.parse(result);
dps.splice(0, dps.length);
$.each(dataFromJSON, function (index, value) {
dps.push(value);
});
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: "CR",
color: "#1f77b4",
dataPoints:dps[0]
},
{
type: "bar",
showInLegend: true,
name: "TR",
color: "#2ca02c",
dataPoints:dps[1]
},
{
type: "bar",
showInLegend: true,
name: "IR",
color: "#f52887",
dataPoints:dps[2]
},
{
type: "bar",
showInLegend: true,
name: "PTR",
color: "#5afffa",
dataPoints:dps[3]
},
{
type: "bar",
showInLegend: true,
name: "WO",
color: "#9b14e7",
dataPoints:dps[4]
}
]
});
chart.render();
}
});
});
</script>