如何使Kendo图表在移动设备上具有响应性? [英] How to make the Kendo chart on mobile responsive?

问题描述

我已经在剑道中创建了一些图表，在此处链接

I have created some charts in Kendo, Link Here

我的问题是我无法捏住和缩放图表，而且如果更改方向，图表将无法缩放到可用宽度.

My problem is that I cant pinch and zoom the charts and also, if I change the orientation, the charts are not scaling to the available width.

有解决方案吗?

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

   <div data-role="page" id="page11" data-theme='b'>

       <div data-role="view"> 

        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
            <a href="index.html" data-ajax="false"><i class='icon-angle-left'></i></a>
            <h1>Dashboard</h1>
        </div>
        <div data-role="content">
            <div style="padding: 10px;">
                <h3>Steps</h3>
                <div id="steps" style="height: 100px; width: 100%;"></div>
            </div>
            <hr />
            <div style="padding: 10px;">
                <h3>Distance</h3>
                <div id="distances" style="height: 100px; width: 100%;"></div>
            </div>
            <hr />
            <div style="padding: 10px;">
                <h3>Calories</h3>
                <div id="caloriesOut" style="height: 100px; width: 100%;"></div>
            </div>
        </div>
           </div>
    </div>

<script>


    $(document).ready(function () {

        var dSource = getJsonData("ActivitySummary", "week", "", "2Q8LM7");

        $("#steps").kendoSparkline({
            dataSource: dSource,
            chartArea: {
                background: ""
            },

            type: "area",
            seriesColors: ["green"],
            series: [{
                name: "steps",
                field: "steps",
                categoryField: "createddate"
            }]
        });

        $("#distances").kendoSparkline({
            dataSource: dSource,
            chartArea: {
                background: ""
            },
            type: "area",
            seriesColors: ["orangered"],
            series: [{
                name: "distances",
                field: "distances",
                categoryField: "createddate"
            }]
        });

        $("#caloriesOut").kendoSparkline({
            dataSource: dSource,
            chartArea: {
                background: ""
            },
            type: "area",
            seriesColors: ["blue"],
            series: [{
                name: "caloriesOut",
                field: "caloriesOut",
                categoryField: "createddate"
            }]
        });
    });

</script>

<script>
    var app = new kendo.mobile.Application($("#page11"));
</script>

推荐答案

对于缩放和平移附加事件并处理示例

For zooming and pan attach a event and handle it example

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

调整聊天大小并充分利用空间，如下所示

to resize the chat and take the full space use as below

$(window).on("resize", function () {
    $("#chart").data("kendoChart").refresh();
});

这篇关于如何使Kendo图表在移动设备上具有响应性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！