如何开发与剑道UI平移和缩放功能

Question

我使用的剑道UI使用C＃.NET MVC代码，并创建了一个条形图。现在，在这个柱状图我想开发一个平移和缩放功能。

http://demos.telerik.com/kendo-ui/dataviz/bar-charts/pan-and-zoom.html

在上面的链接这个功能发展明确解释，但它是在HTML中，我想开发它的C＃.NET MVC平台剃刀页。

当我用它的JavaScript方法，图表高度总是在每个滚动变焦增加。这是不是缩放功能可行，请提供建议，使之正确。

提前致谢！

Answer 1

嗨，我与规模的增大同样的问题，我通过设置图表高度固定它：

只需添加：

.ChartArea(c =>c .Height(200)

像这样 ：

@(Html.Kendo().Chart(data)
                  .Name("Previsions")
                  .Legend(legend => legend.Position(ChartLegendPosition.Top))
                  .DataSource(d => d.PageSize(40))
                  .ChartArea(c =>c .Height(200) .Background("none"))
                  .Series(series => { ...

.Events(e => e
                              .Drag("onDrag")
                              .DragEnd("onDragEnd")
                              .Zoom("onZoom")))

而我的平移和缩放JavaScript的方法是：

<script >
        // Minimum/maximum number of visible items
        var MIN_SIZE = 10;
        var MAX_SIZE = 80;

        // Optional sort expression
        // var SORT = { field: "val", dir: "asc" };
        var SORT = {};

        // Minimum distance in px to start dragging
        var DRAG_THR = 20;

        // State variables
        var viewStart = 0;
        var viewSize = 40;
        var newStart;

        // Drag handler
        function onDrag(e) {
            var chart = e.sender;
            var ds = chart.dataSource;
            var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);

            if (delta != 0) {
                newStart = Math.max(0, viewStart - delta);
                newStart = Math.min(@data.Count - viewSize, newStart);
                ds.query({
                    skip: newStart,
                    page: 0,
                    pageSize: viewSize,
                    sort: SORT
                });
            }
        }

        function onDragEnd() {
            viewStart = newStart;
        }

        // Zoom handler
        function onZoom(e) {
            var chart = e.sender;
            var ds = chart.dataSource;
            viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);
            ds.query({
                skip: viewStart,
                page: 0,
                pageSize: viewSize,
                sort: SORT
            });

            // Prevent document scrolling
            e.originalEvent.preventDefault();
        }
    </script>

不要忘记在剃刀文件中的图表前，把脚本。