关闭

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

标签: 移动开发canvas统计图表爱码哥
806人阅读 评论(0) 收藏 举报
分类:

通过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已经在相应代码处进行了修改:


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

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

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13571次
    • 积分:343
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类