1

アプリケーションに剣道グリッド剣道チャートがあります。グラフとグリッドの両方に共有データソースを使用しています。私の問題は、ページ読み込みグリッドにすべてのデータが表示されますが、チャートには一部のデータしか表示されません。

私のチャートコード:

$("#Chart").kendoStockChart({
    theme         : $(document).data("kendoSkin") || "metro",
    dataSource    : DataSource,
    autoBind      : false,
    legend        : {
        position: "right", visible: true
    },
    dateField     : "date",
    seriesDefaults: { type: "line" },
    series        : [
        {
            field: "value",
            name : "value"
        }
    ],
    valueAxis: [
        {
            max    : 5.0,
            min    : 0,
            labels : {
                format: "{0}"
            },
            tooltip: { visible: true, format: "{0}" }
        }
    ],
    navigator: {
        series: [
            { field: "item", type: "area"}
        ]
    }
});
4

1 に答える 1

3

KendoUIv2012.3.1315の新しいバージョンに更新します。

<script src="http://cdn.kendostatic.com/2012.3.1315/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.default.min.css" rel="stylesheet"/>

編集:すべてのオプションを共有している2つのKendo UIウィジェット間でデータソースを共有する場合、これにはが含まれpageSizeます。したがって、すべての結果をに表示するか、gridまたはのページにそれらのアイテムのみを表示しますchart

共有する代わりに、の結果(コンテンツ)を共有DataSourceすることをお勧めします。つまり:

  1. DataSource現在行っているように、、、Gridおよびを定義しChartます。
  2. の値を。dataSourceに置き換えます。Gridundefined
  3. 共有 DataSource定義にchange、データをに割り当てるイベントを追加しGrid.dataSourceます。

このようなもの:

var sharedDataSource = new kendo.data.DataSource({
    type     : "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema   : {
        model: {
            fields: {
                OrderDate: { type: "date" }
            }
        }
    },
    change   : function (e) {
        grid.dataSource.data(e.items);
    }
});

ここで実行されているコードを確認してください:http://jsfiddle.net/OnaBai/5bchz/

于 2013-03-05T11:41:55.753 に答える