2

剣道 UI 折れ線グラフの x 軸でカテゴリを正しく並べ替える方法がわかりません。これが私の例です：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="chart"></div>
    <script src="js/thirdParty/jquery.js"></script>
    <script src="js/thirdParty/kendo.all.min.js"></script>
    <script>
        $(function () {
            var data,
            dataSource;
        data = [{
                type: "C1",
                amount: 100,
                year: 2008
            }, {
                type: "C2",
                amount: 120,
                year: 2008
            }, {
                type: "C2",
                amount: 50,
                year: 2009
            }, {
                type: "C1",
                amount: 10,
                year: 2010
            }, {
                type: "C1",
                amount: 120,
                year: 2011
            }, {
                type: "C2",
                amount: 50,
                year: 2011
            }];
        dataSource = new kendo.data.DataSource({
            data: data,
            group: {field: "type"},
                sort: { field: "year" }
        });
            $("#chart").kendoChart({
                dataSource: dataSource,
                series: [{
                    type: "line",
                    field: "amount",
                    categoryField: "year",
                    name: "#= group.value #"
                }],
            })
        });
    </script>
</body>
</html>

出力のスクリーンショットは次のとおりです。

ここに画像の説明を入力

ご覧のとおり、データは年順であり、剣道データ ソースで年でソートするように指定したにもかかわらず、年の順序が正しくありません。

どんな助けでも大歓迎です。

4

2 に答える 2

0

次のように、データ バインドをチャートに追加する必要があります。

 <script>
        $(function () {
            var data,
            dataSource;
        data = [{
                type: "C1",
                amount: 100,
                year: 2008
            }, {
                type: "C2",
                amount: 120,
                year: 2008
            }, {
                type: "C2",
                amount: 50,
                year: 2009
            }, {
                type: "C1",
                amount: 10,
                year: 2010
            }, {
                type: "C1",
                amount: 120,
                year: 2011
            }, {
                type: "C2",
                amount: 50,
                year: 2011
            }];
        dataSource = new kendo.data.DataSource({
            data: data,
            group: {field: "type"},
                sort: { field: "year" }
        });
            $("#chart").kendoChart({
                dataSource: dataSource,
                series: [{
                    type: "line",
                    field: "amount",
                    categoryField: "year",
                    name: "#= group.value #"
                }],
              dataBound: function(e) {
          var axis = e.sender.options.categoryAxis;
          axis.categories = axis.categories.sort();
        }
            })
        });
    </script>
于 2016-11-07T17:26:54.673 に答える