KendoUI餅圖不工作

我不能得到這個簡單的KendoUI餅圖工作，我沒有看到任何代碼錯誤。KendoUI餅圖不工作

我只有一些基本的JSON，我試圖綁定到。您可以看到源數據包含已計算的百分比以及實際值。我只是試圖將餅圖綁定到百分比列。 percentageUnit和percentageValue的原因是因爲我已經有了代碼來在兩者之間切換。實際值和單位字段將用作工具提示。所以在源代碼中包含所有這些數據非常重要。

該圖表確實填充，但看起來完全搞砸了。是我還是劍道？

http://jsfiddle.net/jqIndy/38gH4/

Pie Chart Result

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>JS Bin</title> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script> 
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" /> 
</head> 
<body> 
    <div id="client-order-status"></div> 

    <script> 
    var dr = [{ 
     Status: "CANCELLED", 
     Units:554615.000000000000, 
     Value:12194910.410000000000, 
     PercentageUnits:12.955700000000, 
     PercentageValue:25.479241000000 
     },{ 
     Status: "INVOICED", 
     Units:3260369.000000000000, 
     Value:31610141.095120000000, 
     PercentageUnits:76.161596000000, 
     PercentageValue:66.044143000000 
     },{ 
     Status: "OPEN", 
     Units: 465873.000000000000, 
     Value: 4057089.598000000000, 
     PercentageUnits: 10.882704000000, 
     PercentageValue: 8.476615000000 
     }]; 

     var dsCOStatus = new kendo.data.DataSource({ 
     data: dr, 
     schema: { 
      type: "json", 
      model: { 
      fields: { 
       Status: "Status", 
       PercentageUnits: "PercentageUnits", 
       PercentageValue: "PercentageValue", 
       Units: "Units", 
       Value: "Value" 
      } 
      } 
     }, 
     }); 

     $(function() { 

     $("#client-order-status").kendoChart({ 
      dataSource: dsCOStatus, 
      title: { 
      text: "Client Order Status (past 12 months)" 
      }, 
      legend: { 
      position: "bottom" 
      //labels: { 
      // template: "#= text # (#= value #%)" 
      //} 
      }, 
      seriesDefaults: { 
      type: "pie" 
      //labels: { 
      // visible: true, 
      // format: "{0}%" 
      //} 
      }, 
      series: [{ 
      field: "Status", 
      categoryField: "Value" 
      }], 
      tooltip: { 
      visible: true 
      //format: "{0}" 
      } 
     }).show(); 
     }); 

    </script> 
</body> 
</html>

在XML我有同樣的問題：

var drXML = "<D><Report><Status>CANCELLED</Status><Units>554615.000000000000</Units><Value>12194910.410000000000</Value><PercentageUnits>12.955700000000</PercentageUnits><PercentageValue>25.479241000000</PercentageValue></Report><Report><Status>INVOICED</Status><Units>3260369.000000000000</Units><Value>31610141.095120000000</Value><PercentageUnits>76.161596000000</PercentageUnits><PercentageValue>66.044143000000</PercentageValue></Report><Report><Status>OPEN</Status><Units>465873.000000000000</Units><Value>4057089.598000000000</Value><PercentageUnits>10.882704000000</PercentageUnits><PercentageValue>8.476615000000</PercentageValue></Report></D>"; 

    var dsCOStatus = new kendo.data.DataSource({ 
     data: drXML, 
     schema: { 
     type: "xml", 
     data: "/D/Report", 
     model: { 
      fields: { 
      Status: "Status/text()", 
      PercentageUnits: "PercentageUnits/text()", 
      PercentageValue: "PercentageValue/text()", 
      Units: "Units/text()", 
      Value: "Value/text()" 
      } 
     } 
     }

來源

2012-12-06 jqIndy

我認爲你需要換你的categoryField和字段名：

series: [{ 
    field: "Value", 
    categoryField: "Status" 
}]

從API reference：

categoryField：包含該扇區的類別名稱的數據字段。
valueField：包含系列值的數據字段。

來源

2012-12-06 13:20:31 gudman

感謝您的回答。它對JSON工作正常，但如果我對XML使用同樣的方法，它仍然是一樣的。有任何想法嗎？看看我上面的XML數據源代碼。謝謝 – jqIndy

我找到了答案。因爲XML被作爲文本返回/解析，所以KendoUI網格看起來並不接受它作爲有效值。更改值字段後，它工作正常。

看到這個網址：

http://www.kendoui.com/forums/ui/grid/sort-order-numeric-with-xml-binded-datasource.aspx

感謝Gudman！下面

答：

schema: { 
     type: "xml", 
     data: "/DsCOStatus/Report", 
     model: { 
      fields: { 
      Status: "Status/text()", 
      PercentageUnits: "PercentageUnits/text()", 
      PercentageValue: "PercentageValue/text()", 
      Units: "Units/text()", 
      Value: { field: "Value/text()", type:"number" } 
      //Value: "Value/text()" 
      } 
     } 
     }

來源

2012-12-06 15:36:52 jqIndy

KendoUI餅圖不工作

回答

相關問題