2

chartjsやjqpolotを試してみたのですが表示されません。Webサイトと同じ設定では動かないのでしょうか?それともmonacaでは対応されていないのでしょうか?ご教授お願いします。

1 件の回答 1

1

MonacaでChart.js使っていますが、正常に動いています。下記のソースコードをChart.jsを読み込んでからMonacaで試してみてください。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="libs/Chart.js"></script>    
</head>
<body>

    <div id="canvas-holder">
        <canvas id="chart-area" width="300" height="300"/>
    </div>

    <script>
        var pieData = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 40,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }

            ];

            window.onload = function(){
                var ctx = document.getElementById("chart-area").getContext("2d");
                window.myPie = new Chart(ctx).Pie(pieData);
            };

    </script>    
</body>
</html>

画像の説明をここに入力

P.S (2015年4月4日) Onsen UIのSliding Menu中で使用できるように改良

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="Chart.js"></script>    
    <script>        
        var myApp = ons.bootstrap();

        myApp.controller('myCtrl', function () {

        var pieData = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 40,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }

            ];

            var ctx = document.getElementById("chart-area").getContext("2d");
            window.myPie = new Chart(ctx).Pie(pieData);

        });

    </script>
</head>
<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
</body>
</html>

page1.html

<ons-navigator>
   <ons-page ng-controller="myCtrl">

        <div id="canvas-holder">
            <canvas id="chart-area" width="300" height="300"/>
        </div>

    </ons-page>
</ons-navigator>
3
  • ありがとうございます! 提示してくださったコードを「最小限のテンプレート」で試してみたところ正常に作動しました。 しかし、「Onsen UI Sliding Menu」で同じように試したところ、作動しませんでした。これは何が原因なのでしょうか。
    – oxygen8
    Commented 2015年4月3日 18:46
  • oxygenさん。コメントありがとうございます。Onsen UIは内部的にAjaxを用いてテンプレートの情報を取得してきます。その途中で、window.onload()が呼ばれないことにより、Chart.jsの初期化が走らないのだと思います。Sliding Menuでも動作するコードを載せておきますので、お手数ですが見て頂けると嬉しいです。 もしお時間があれば、一度AngularJSのコントローラー等の仕組みについても学ばれた方が良いかと思います。
    – Middle
    Commented 2015年4月4日 10:07
  • 回答ありがとうございます!書いて下さったコードを試したところ正常に作動しました!Angularjsについてしっかり学んできます。
    – oxygen8
    Commented 2015年4月6日 18:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。