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

来源：互联网发布：苏联骗西班牙黄金知乎编辑：程序博客网时间：2024/05/22 09:49

通过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.width和canvas.height改成了canvas.canvasWidth和canvas.canvasHeight。
其中canvasWidth和canvasHeight是iMAG框架增加的属性。

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

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

0 0