Question

我已使用this在我的移动应用上呈现饼图。当我在桌面上的浏览器模拟器上测试时，它工作正常，但是当我在移动设备上运行它时，图表不会渲染，相反，我得到一个空白div。我可能出错的任何线索？

它可能不相关，但我正在使用jQuery Mobile框架作为前端。

Answer 1

简介

经过测试：

桌面版Firefox和Chrome
Android 4.1.1 Chrome
iPad 3 6.0

解决方案

jQuery Mobile在这里并不特别，你需要知道它能够做一些具体的事情。

由于其不寻常的页面处理，图表或任何其他可视化框架（需要绘图）只能在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();

        });
});

还有一件事需要考虑，在jQuery Mobile初始化之后，dojo.js 必须被加载/初始化。

如果您想更好地了解jQuery Mobile页面事件，请查看我的其他 ARTICLE （我的个人博客），或者找到 HERE

如果您对此示例有更多疑问，请随时给我发电子邮件。

dojo饼图无法在移动设备上呈现

1 个答案:

简介

解决方案