欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-25 23:37:32
...

通过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>

效果:

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

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

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

 

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

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

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

 

相关标签: 移动开发 框架