1

これを使用して、モバイルアプリで円グラフをレンダリングしました。デスクトップのブラウザシミュレータでテストすると正常に動作しますが、モバイルデバイスで実行すると、グラフがレンダリングされず、代わりに空白のdivが表示されます。私が間違っているかもしれない手がかりはありますか？

関連性がないかもしれませんが、フロントエンドにjQueryMobileフレームワークを使用しています。

4

1 に答える 1

2

イントロ

テスト済み：

  1. デスクトップFirefoxとChrome
  2. Android 4.1.1 Chrome
  3. iPad 3 6.0

解決

jQuery Mobileはここでは少し特別です。特定のことを実行できるようにするには、jQueryMobileをかなりよく知っている必要があります。

異常なページ処理のため、チャートまたはその他の視覚的フレームワーク（描画が必要）は、pageshowイベント中にのみ使用できます。

私はあなたに実用的な例を作りました：http：//jsfiddle.net/Gajotres/XJDYU/、それはあなた自身の例から作られています：

$(document).on('pageshow', '#index', function(){       
        require([
             // Require the basic chart class
            "dojox/charting/Chart",

            // Require the theme of our choosing
            "dojox/charting/themes/Claro",
            
            // Charting plugins: 

            //  We want to plot a Pie chart
            "dojox/charting/plot2d/Pie",

            // Retrieve the Legend, Tooltip, and MoveSlice classes
            "dojox/charting/action2d/Tooltip",
            "dojox/charting/action2d/MoveSlice",
            
            //  We want to use Markers
            "dojox/charting/plot2d/Markers",

            //  We'll use default x/y axes
            "dojox/charting/axis2d/Default",

            // Wait until the DOM is ready
            "dojo/domReady!"
        ], function(Chart, theme, Pie, Tooltip, MoveSlice) {

            // Define the data
            var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
            
            // Create the chart within it's "holding" node
            var chart = new Chart("chartNode");

            // Set the theme
            chart.setTheme(theme);

            // Add the only/default plot 
            chart.addPlot("default", {
                type: Pie,
                markers: true,
                radius:170
            });
            
            // Add axes
            chart.addAxis("x");
            chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });

            // Add the series of data
            chart.addSeries("Monthly Sales - 2010",chartData);
            
            // Create the tooltip
            var tip = new Tooltip(chart,"default");
            
            // Create the slice mover
            var mag = new MoveSlice(chart,"default");
            
            // Render the chart!
            chart.render();

        });
});

もう1つ考慮すべき点として、dojo.jsはjQueryMobileの初期化後にロード/初期化する必要があります。

jQuery Mobileページのイベントをよりよく理解したい場合は、他の記事（私の個人ブログ）を参照するか、ここで見つけてください。

また、この例についてさらに質問がある場合は、遠慮なく私にメールしてください。

于 2013-03-12T11:37:55.757 に答える