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.

Is there a solution for this?

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

回答1:

For zooming and pan attach a event and handle it example

Take a look at 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();
});

回答2:

kendo directives useful

$(window).resize(function () {
    kendo.resize($("div.k-chart[data-role='chart']"));
});