1

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

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

4

1 回答 1

2

介绍

测试：

  1. 桌面 Firefox 和 Chrome
  2. 安卓 4.1.1 铬
  3. 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();

        });
});

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

如果您想更好地了解 jQuery Mobile 页面事件，请查看我的其他文章（我的个人博客），或者在这里找到它。

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

于 2013-03-12T11:37:55.757 回答