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>

我的 Coldfusion 函数返回了这个:

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

这是函数:

<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>

有没有其他人有这个问题？

最佳答案

2件事。
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();});});

这就是我的 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>

关于jquery - 使用数据库中的数据加载 canvasjs 图表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22015534/