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

原创 2016年05月31日 12:29:26

通过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资源目录下。


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

利用canvas绘制饼状图一种方法

利用canvas绘制饼状图以及上面对应的占比数值,方法很多,下面分享其中一种方法。 效果 思路: 1)将每块饼的占比以整数形式储存在数组nums中,将每个饼的颜色以字符串形式储存在数...

使用amCharts绘制统计图表(柱状图、折线图、3D图)

amCharts是一款优秀的数据可视化js图形库,包括Javascript Charts, Javascript Stock Chart和Interactive Javascript Maps三类产品...

【GraphMaker】Unity3D图表——柱状图、折线图、饼图

万万没想到对于3D物体应付起来易如反掌的Unity3D在面对图表的绘制是如此简直无力,需要和C++或者其它语言一样需要调用到自己底层绘图接口《【Unity3D】平面绘图——GL与GUI》(点击打开链接...

Android 统计图表引擎 AChartEngine(三) - 示例源码折线图、饼图和柱状图

折线图: [java] view plaincopy package org.achartengine.chartdemo.demo.c...

Flex3D图表——立方体柱状图(ColumnChart组件)

思路分为以下:三步: 1:选用Col

highcharts图表组件实战经验篇:如何设置柱状图柱子立体(颜色渐变)效果类似3D效果之linearGradient和stops

[摘要]: 为了让2D的柱状图展现更加美观和独具美感,可能客户会要求你将柱状图的柱子弄成立体效果,那样看上去就很有立体的感觉,美观度又会上升一个等级的。 这样的图表看着是不是觉得很赞勒。那么我们如...

JFreeChart在Struts2中实现3D柱状图统计

上篇介绍了JFreeChart柱状图在Struts2中的实现,这篇来看一下3D柱状图的实现。 在Struts2中,用JFreeChart实现3D柱状图统计 下面分别用两种方式来实现: 一种是以j...

Android统计图表之柱状图(条形图)

 Android统计图表之柱状图(条形图) 柱状图是统计图表中经常用到的一种图表,比如降雨量之类的统计展示。我之前写了一些关于Android上的统计图表库MPAndroidChart,附录了一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)