0

我无法让这个简单的 KendoUI 饼图工作，而且我没有看到代码有任何问题。

我只有一些我试图绑定的基本 JSON。如您所见，源数据包含已计算的百分比以及实际值。我只是想将饼图绑定到百分比列。percentUnit 和 percentValue 的原因是因为我已经有代码可以在两者之间切换。实际值和单位字段将用作工具提示。因此，在源中拥有所有数据非常重要。

该图表确实填充但看起来完全一团糟。是我还是剑道？

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

饼图结果

<!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()"
          }
        }
      }
4

2 回答 2

1

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

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

从API 参考：

  • categoryField：包含扇区类别名称的数据字段。
  • valueField：包含系列值的数据字段。
于 2012-12-06T13:20:31.603 回答
0

我找到了答案。因为 XML 被作为文本返回/解析，所以 KendoUI 网格似乎不接受它作为有效值。更改值字段后，它工作正常。

请参阅此网址：

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

谢谢古德曼！

下面回答：

 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-06T15:36:52.467 回答