C# 如何使用剑道UI开发平移和缩放功能

我将剑道UI与C#.Net MVC代码一起使用，并创建了一个条形图。现在在这个条形图中，我想开发一个平移和缩放功能

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

当我使用它的javascript方法时，每次滚动缩放时，图表高度都会增加。这对于缩放功能来说是不可行的，因此请提供正确的建议

---

提前谢谢

嗨，我在尺寸增大时遇到了同样的问题，我通过设置图表高度来解决：

只是补充：

.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>

//可见项目的最小/最大数量
变量最小值=10；
var MAX_SIZE=80；
//可选排序表达式
//var SORT={field:“val”，dir:“asc”}；
var SORT={}；
//开始拖动的最小距离（px）
var DRAG_THR=20；
//状态变量
var viewStart=0；
var viewSize=40；
var newStart；
//拖动处理器
函数onDrag（e）{
var图表=e.sender；
var ds=chart.dataSource；
var delta=数学圆（e.originalEvent.x.initialDelta/DRAG_THR）；
如果（增量！=0）{
newStart=Math.max（0，viewStart-delta）；
newStart=Math.min（@data.Count-viewSize，newStart）；
ds.query({
跳过：newStart，
页码：0，
pageSize:viewSize，
排序：排序
});
}
}
函数onDragEnd（）{
viewStart=newStart；
}
//缩放处理程序
函数onZoom（e）{
var图表=e.sender；
var ds=chart.dataSource；
viewSize=Math.min（Math.max（viewSize+e.delta，min\u SIZE），max\u SIZE）；
ds.query({
跳过：查看开始，
页码：0，
pageSize:viewSize，
排序：排序
});
//防止文档滚动
e、 originalEvent.preventDefault（）；
}

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