Question

我无法让这个简单的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()"
          }
        }
      }

Answer 1

我认为您需要交换categoryField和字段名称：

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

来自API reference：

categoryField ：包含行业类别名称的数据字段。
valueField ：包含系列值的数据字段。

Answer 2

我找到了答案。因为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()"
          }
        }
      }

KendoUI饼图不起作用

2 个答案: