如何将参数传递给从 XMLHttpRequest 返回的 CanvasJS？

Question

我从 http://canvasjs.com/html5-javascript-bar-chart/ ("Cost of pancake..") 中获取了示例代码。当运行时，它当然有效。

我创建了一个小 html，当输入 url 时，它 returns 我正是应该传递给的第二个参数：var chart = new CanvasJS.Chart("chartContainer",my_parameter);

代码：

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
    document.getElementById("myDiv").innerHTML=xmlhttp.response;
    alert(xmlhttp.responseText);
    var toSend = xmlhttp.response;
    var chart = new CanvasJS.Chart("chartContainer",toSend); // The problem is here
    chart.render();
}
  }
xmlhttp.open("GET","https://myURL",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>PRESS BUTTON!!!</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>

<script type="text/javascript" src="canvasjs-1.7.0-beta/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>


</html>

MyURL 正在返回这个（正是在 canvasJS 图表示例中写的）：

{
    title:{
        text:"Cost Of Pancake Ingredients, 2011"
    },
            animationEnabled: true,
    axisX:{
        interval: 1,
        labelFontSize: 10,
        lineThickness: 0
    },
    axisY2:{
        valueFormatString: "$ 0",
        lineThickness: 0                
    },
    toolTip: {
        shared: true
    },
    legend:{
        verticalAlign: "top",
        horizontalAlign: "center"
    },

    data: [
    {     
        type: "stackedBar",
        showInLegend: true,
        name: "Butter (500gms)",
        axisYType: "secondary",
        color: "#7E8F74",
        dataPoints: [
            {y: 3, label: "India"},
            {y: 5, label: "US" },
            {y: 3, label: "Germany"   },            
            {y: 6, label: "Brazil"  },          
            {y: 7, label: "China"  },
            {y: 5, label: "Australia"  },
            {y: 5, label: "France"  },
            {y: 7, label: "Italy"  },
            {y: 9, label: "Singapore"  },
            {y: 8, label: "Switzerland"  },
            {y: 12, label: "Japan"  }
        ]
    },
    {     
        type: "stackedBar",
        showInLegend: true,
        name: "Flour (1kg)",
        axisYType: "secondary",
        color: "#F0E6A7",
        dataPoints: [
            {y: .5, label: "India" },
            {y: 1.5, label: "US" },
            {y: 1, label: "Germany"   },            
            {y: 2, label: "Brazil"  },          
            {y: 2, label: "China"  },
            {y: 2.5, label: "Australia"  },
            {y: 1.5, label: "France"  },
            {y: 1, label: "Italy"  },
            {y: 2, label: "Singapore"  },
            {y: 2, label: "Switzerland"  },
            {y: 3, label: "Japan"  }
        ]
    },
    {     
        type: "stackedBar",
        showInLegend: true,
        name: "Milk (2l)",
        axisYType: "secondary",
        color: "#EBB88A",
        dataPoints: [
            {y: 2, label: "India" },
            {y: 3, label: "US" },
            {y: 3, label: "Germany"   },            
            {y: 3, label: "Brazil"  },          
            {y: 4, label: "China"  },
            {y: 3, label: "Australia"  },
            {y: 4.5, label: "France"  },
            {y: 4.5, label: "Italy"  },
            {y: 6, label: "Singapore"  },
            {y: 3, label: "Switzerland"  },
            {y: 6, label: "Japan"  }
        ]
    },
    {
        type: "stackedBar",
        showInLegend: true,
        name: "Eggs (20)",
        axisYType: "secondary",
        color:"#DB9079",
        indexLabel: "$#total",
        dataPoints: [
            {y: 2, label: "India" },
            {y: 3, label: "US" },
            {y: 6, label: "Germany"   },            
            {y: 4, label: "Brazil"  },          
            {y: 4, label: "China"  },
            {y: 8, label: "Australia"  },
            {y: 8, label: "France"  },
            {y: 8, label: "Italy"  },
            {y: 4, label: "Singapore"  },
            {y: 11, label: "Switzerland"  },
            {y: 6, label: "Japan"  }
        ]
    }
    ]
    }

我怀疑 xmlhttp.response 和 xmlhttp.responseText 都返回文本..

如果我删除 toSend 参数并输入硬编码的长 JSON 它工作正常。

有人可以帮忙吗？

-------- 用解决方案编辑：

var toSend= eval ('('+ xmlhttp.responseText +')');
var chart = new CanvasJS.Chart("chartContainer",toSend);
chart.render();

Answer 1

解析 JSON 字符串以将其转换为 JavaScript 对象。

var toSend;

try {
   toSend = JSON.parse(xmlhttp.responseText);
} catch(e) {
   toSend = xmlhttp.response;
}

var chart = new CanvasJS.Chart('chartContainer', toSend);

如何将参数传递给从 XMLHttpRequest 返回的 CanvasJS？

How to pass a parameter to CanvasJS returned from XMLHttpRequest?

javascript

ajax

json

xmlhttprequest

html5-canvas