Jquery 使用数据库中的数据加载canvasjs图表

我正在使用coldfusion将数据加载到饼图中，但我得到的不是饼图，而是35个数据点的列表，并且没有显示任何图表

这是我的代码：

<script type="text/javascript">
$(document).ready(function () {
    $.getJSON("display.cfc?method=getData&lob=all", function (result) {
        alert(result);
        var chart2 = new CanvasJS.Chart("piechart", {
            theme: "theme2",
            legend: {
                fontSize: 12,
                horizontalAlign: "right",
                verticalAlign: "center"
            },
            data: [{
                type: "pie",
                showInLegend: true,
                dataPoints: result
            }]
        });
        chart2.render();
    });
});
</script>
<div id="piechart" style="display: inline-block; height: 200px; width: 400px;"></div>

这就是功能：

<cffunction name="getData" access="remote" returnformat="json">
<cfargument name="lob" type="string" required="yes" />
<cfset var theQuery = getTransitionStatusCounts(#arguments.lob#)>
<cfset var rObj = "">
<cfset var rObjArray = []>

<cfoutput query="theQuery">
    <cfset rObj = '{y: #count#, legendtext: "#status#"}'>
    <cfset arrayAppend(rObjArray, rObj)>
</cfoutput>

<cfreturn rObjArray>

</cffunction>

---

还有其他人有这个问题吗？

您的json数据格式不正确-数组应该用[]括起来，变量用引号括起来。尝试输出下面的JSON-在您的情况下，只需一个sting连接就可以了

[{"y": 142, "legendtext": "In Progress"}, {"y": 1083, "legendtext": "New"},{"y": 48, "legendtext": "Error"}]

两件事。
1.数据点需要在一个数组中
2.按原样使用coldfusion的json。不要在cfc中手动创建json

$(document).ready(function () {
   $.getJSON("display.cfc?method=getData&lob=all", function (result) {       
      dp = [];
      for(var i = 0 ; i< result.DATA.length; i++){
          dp.push({y: result.DATA[i][0], label: result.DATA[i][1]})};       
      var chart2 = new CanvasJS.Chart("piechart", {
        theme: "theme2",
        data: [{
            type: "pie",
            dataPoints: dp }]});
        chart2.render();});});

$（文档）.ready（函数（）{
$.getJSON（“display.cfc？method=getData&lob=all”，函数（结果）{
dp=[]；
对于（var i=0；i

这是我的cfc里的

<cfcomponent access="remote">
<cffunction name="getData" access="remote" returnformat="json">
    <cfargument name="lob" type="string" required="yes" />
    <cfset var myQuery = QueryNew("y,label")/>
    <cfset QueryAddRow(myQuery,3) />

    <cfset QuerySetCell(myQuery, "y" , 142,1) />
    <cfset QuerySetCell(myQuery, "label" , "In Progress", 1) />

    <cfset QuerySetCell(myQuery, "y" , 1083,2) />
    <cfset QuerySetCell(myQuery, "label" , "New",2) />

    <cfset QuerySetCell(myQuery, "y" , 48,3) />
    <cfset QuerySetCell(myQuery, "label" , "Error",3) />

    <cfreturn myQuery/>    
  </cffunction>
</cfcomponent>

---

问题是您将手动构造的JSON字符串与

returnformat=“JSON”

混合使用。因此，当CF对数组进行编码时，它不知道数组元素已经编码（部分编码），并将元素视为字符串，转义现有的引号。因此，最终结果不是JSON ie中的结构数组，结果如下：

  [ "{y: 142, legendtext: \"In Progress\"}",.... ]

。。。而不是：

  [ {"y":142, "legendtext":"In Progress"},....]

您不需要滚动自己的JSON。只需创建一个结构数组，CF将完成其余工作：

    ...
    <cfoutput query="theQuery">
        <!--- use structure notation to preserve case --->
        <cfset rObj = {} />
        <cfset rObj["y"] = count />
        <cfset rObj["legendtext"] = status />
        <cfset arrayAppend(rObjArray, rObj)>
    </cfoutput>

    <cfreturn rObjArray>

。。。

---

此外，为了获得更大的灵活性，您可以让函数返回一个普通数组，然后在从jQuery调用.cfc时使用参数

？returnformat=JSON

指定JSON格式。

数组将由

[…]

表示。因为他们使用的是

returnformat=“json”

这是自动完成的。（编辑）与问题无关：确保始终

var/local

作用域函数局部变量。此外，如果未使用结果，则无需捕获结果。只需编写

    ...
    <cfoutput query="theQuery">
        <!--- use structure notation to preserve case --->
        <cfset rObj = {} />
        <cfset rObj["y"] = count />
        <cfset rObj["legendtext"] = status />
        <cfset arrayAppend(rObjArray, rObj)>
    </cfoutput>

    <cfreturn rObjArray>