

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


CC BY-SA 3.0
2015-04-02T13:10:54.267
8697
2015-07-03T11:11:15.853
8748
question
monaca
monacaでグラフを表示するために


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

[code]

    <!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>
    
[/code]

![画像の説明をここに入力](https://i.stack.imgur.com/OKuko.jpg)

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

index.html

[code]

    <!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>
    
[/code]

page1.html

[code]

    <ons-navigator>
       <ons-page ng-controller="myCtrl">
    
            <div id="canvas-holder">
                <canvas id="chart-area" width="300" height="300"/>
            </div>
    
        </ons-page>
    </ons-navigator>
    
[/code]


CC BY-SA 3.0
2015-04-03T09:28:37.817
8726
2015-04-04T10:10:13.823
2015-04-04T10:10:13.823
7871
7871
8697
answer