移动开发|绘制饼图、柱状图、2d、3d统计图表

通过HTML5的canvas来绘制图表功能，需要用到web控件。

iMAG内置了awesomechart.js用来显示统计图表，关于AwesomeChart的示例请参考Github上的Demo：AwesomeChartJS。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page orientation="landscape">
        <title>
            <center>
                <label>Canvas统计图表</label>
            </center>
        </title>
        <content>
            <web include="awesomechart.js,canvas.js"> 
            <![CDATA[
                <html>
                    <head>
                        <style>
                        body {
                            margin:0;
                            padding:0;
                        }
                        canvas {
                            position:fixed;
                            width:100%;
                            height:100%;
                        }
                        </style>
                    </head>
                    <body>
                        <canvas id="chartCanvas13" width="350" height=350">
                            Your web-browser does not support the HTML 5 canvas element.
                        </canvas>
                        <script>
                            var chart13 = new AwesomeChart('chartCanvas13');
                            chart13.chartType = "pareto";
                            chart13.title = "Worldwide browser market share: December 2010";
                            chart13.data = [51.62,31.3,10.06,4.27,1.96,0.78];
                            chart13.labels = ['IE','Firefox','Chrome','Safari','Opera','Other'];
                            chart13.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8'];
                            chart13.chartLineStrokeStyle = 'rgba(0, 0, 200, 0.5)';
                            chart13.chartPointFillStyle = 'rgb(0, 0, 200)';
                            chart13.draw();
                        </script>
                    </body>
                </html>
            ]]>
            </web>
        </content>
    </page>
</imag>

效果：

引入awesomechart.js的同时引入canvas.js以适配高清屏的手机，iMAG内置的AwesomeChart已经在相应代码处进行了修改：

移动开发|绘制饼图、柱状图、2d、3d统计图表

将原来JS代码里的canvas.width和canvas.height改成了canvas.canvasWidth和canvas.canvasHeight。
其中canvasWidth和canvasHeight是iMAG框架增加的属性。

AwesomeChartJS的功能相对比较简单，需要绘制更复杂的图表可以使用其他的Javascript库，比如ichart

此时需要把所依赖的js和css文件放到/res/default资源目录下。

移动开发|绘制饼图、柱状图、2d、3d统计图表

相关推荐