4

コールドフュージョンを使用して円グラフにデータを読み込んでいますが、円グラフの代わりに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>

他の誰かがこの問題を抱えていますか?

4

3 に答える 3

2

問題は、手動で作成された JSON 文字列とreturnformat="json". そのため、CF が配列をエンコードするとき、配列要素が既に (かなり部分的に) エンコードされていることを認識せず、要素を文字列として扱い、既存の引用符をエスケープします。したがって、最終結果は JSON の構造の配列ではありません。つまり、結果は次のようになります。

  [ "{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>

また、柔軟性を高めるために、関数が単純な配列を返すようにし?returnformat=json、jQuery から .cfc を呼び出すときにパラメーターを使用して JSON 形式を指定することもできます。

于 2014-02-25T19:13:04.787 に答える
2

2つのこと。
1. datapoints は配列内にある必要があります
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>
于 2014-02-25T17:44:56.830 に答える
0

JSON データの形式が正しくありません。配列は [] で囲み、変数は引用符で囲む必要があります。以下の JSON を出力してみてください。この場合、文字列の連結だけで機能するはずです。

[{"y": 142, "legendtext": "In Progress"}, {"y": 1083, "legendtext": "New"},{"y": 48, "legendtext": "Error"}]
于 2014-02-25T17:35:00.983 に答える