0

この単純な KendoUI 円グラフを機能させることができず、コードに問題はありません。

バインドしようとしている基本的な JSON しかありません。ご覧のとおり、ソース データには、計算済みのパーセンテージと実際の値が含まれています。円グラフをパーセンテージ列にバインドしようとしているだけです。パーセンテージ ユニットとパーセンテージ値の理由は、2 つを切り替えるコードが既に用意されているためです。実際の値と単位フィールドはツールチップとして使用されます。そのため、ソースにすべてのデータを含めることが重要です。

グラフは表示されますが、完全にめちゃくちゃに見えます。私ですか、それとも剣道ですか？

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 グリッドはこれを有効な値として受け入れないようです。値フィールドを変更すると、正常に機能します。

次の URL を参照してください。

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 に答える