кендо DataViz Mobile HTML5

Любая идея, как добавить диаграммы с помощью Telerik Kendo UI DataViz в веб-приложение для iPhone. Заранее спасибо. Вот что я пытаюсь сделать, но диаграмма не отображается!

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <script src="../../../../Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="../../../../Scripts/kendo.all.js" type="text/javascript"></script>
    <script src="../../../../Scripts/console.js" type="text/javascript"></script>
    <link href="../../../../Content/Mobile/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../../../Content/Mobile/kendo.mobile.all.min.css" rel="stylesheet"
        type="text/css" />

    <div data-role="view" data-title="Views">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
    <ul data-role="listview" data-style="inset">
        <li><a href="#secondview">Local View</a></li>
    </ul>
    <ul data-role="listview" data-style="inset">
        <li><a href="../../content/mobile/view/remoteview.html">Remote View</a></li>
    </ul>
</div>

<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
  <div id="chart">
        </div>
        <script>
            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        text: "Kendo Chart Example"
                    },
                    series: [
         { name: "Example Series", data: [200, 450, 300, 125] }
    ]
                });
            }

            $(document).ready(function () {
                setTimeout(function () {

                    createChart();

                    $("#example").bind("kendo:skinChange", function (e) {
                        createChart();
                    });
                }, 400);
            });
        </script>
</div>

<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
</div>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>

заранее спасибо


iphone html kendo-ui kendo-dataviz
person hncl    schedule 19.04.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Компоненты KendoUI DataViz работают в мобильных браузерах на базе Webkit, включая Safari на iOS (источник), кроме того для Android Browser v3 и выше.

Если вы просто хотите узнать, как реализовать диаграмму KendoUI, вот простая диаграмма, которую я сделал, чтобы ответить на другой вопрос о том, как заставить KendoUI отображать отсутствующие значения: http://jsfiddle.net/LyndsySimon/KJuDe/

categoryAxis: {
    categories: [
        'test<tspan dx="-20px" dy="1em">label</tspan>', 2006, 2007, 2008, 2009]
}

Вы можете найти полную ссылку на библиотеку DataViz на сайте KendoUI: http://www.kendoui.com/documentation/dataviz/chart/overview.aspx

person Lyndsy Simon    schedule 19.04.2012
comment
Спасибо, Линдси, я только что отредактировал свой вопрос с помощью кода, который пытаюсь использовать. Может быть, проблема в $(document).ready? - person hncl; 19.04.2012
comment
Это сработало, я также нашел это решение для Android. .com/blogs/teamblog/posts/12-02-17/ - person hncl; 20.04.2012