如何使用 Kendo UI 开发平移和缩放功能

Question

我正在使用带有 C#.Net MVC 代码的 Kendo UI 并创建了一个条形图。现在在这个条形图中，我想开发一个平移和缩放功能。

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

在上面的链接上，这个功能开发被清楚地解释了，但它是在 Html 中，我想在 C#.net MVC 平台的 razor 页面上开发它。

当我使用它的 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>

不要忘记将脚本放在剃刀文件中的图表之前。