移动开发|绘制饼图、柱状图、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中,将每个饼的颜色以字符串形式储存在数...

canvas+js绘制饼状统计图

html> html> head lang="en"> meta charset="UTF-8"> title>title> head> body> canvas id="canvas...

MQTT协议之使用Future模式订阅及发布(使用fusesource mqtt-client实现)

fusesource提供三种mqtt client api: 阻塞API,基于Futur的API和回调API。其中,回调API是最复杂的也是性能最好的,另外两种均是对回调API的封装。 我们下面就简单...

ActiveMQ 即时通讯服务 浅析

ActiveMQ 即时通讯服务 浅析   一、 概述与介绍 ActiveMQ 是Apache出品,最流行的、功能强大的即时通讯和集成模式的开源服务器。ActiveMQ 是一个完全支持...

使用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...

jfreechart 曲线图 3d饼图 3d柱状图

  • 2008年12月28日 04:39
  • 1.37MB
  • 下载

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

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

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

[摘要]: 为了让2D的柱状图展现更加美观和独具美感,可能客户会要求你将柱状图的柱子弄成立体效果,那样看上去就很有立体的感觉,美观度又会上升一个等级的。 这样的图表看着是不是觉得很赞勒。那么我们如...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动开发|绘制饼图、柱状图、2d、3d统计图表
举报原因:
原因补充:

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