`
前进的路中没有月亮
  • 浏览: 20697 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多

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

 

分享到:
评论

相关推荐

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

    JFreeChart是一个强大的Java图形库,它提供了多种图表类型,包括曲线图、饼图和柱状图,且支持2D和3D效果。本篇文章将深入探讨如何使用JFreeChart来创建这些类型的图表,并通过提供的图片示例(PieChart.jpg、line....

    qcustomplot 绘制 饼状图和 柱状图

    在本文中,我们将深入探讨如何使用QCustomPlot库在Qt环境中绘制饼状图和柱状图。QCustomPlot是一个强大的2D绘图库,它提供了丰富的功能,允许开发者自定义图表,以满足各种数据可视化需求。 首先,让我们了解饼状图...

    JFreeChart绘制饼图,折线图,柱状图demo

    JFreeChart是一款强大的Java图表库,它允许开发者在Java应用程序或网页中生成各种高质量的图形,包括饼图、折线图、柱状图等。在本示例中,我们将深入探讨如何利用JFreeChart库来创建这些常见的图表类型。 ### 饼图...

    jfreechart 生成折线图,饼图,柱状图,堆栈柱状图

    JFreeChart 是一个开源的Java库,用于生成高质量的2D图表,如折线图、饼图、柱状图和堆栈柱状图等。它广泛应用于数据分析、报告和应用程序中,提供丰富的自定义选项来满足各种视觉需求。在本项目中,你将找到能够...

    Qt绘制柱状图,可以通用

    2. **Qwt库**:Qwt是Qt的一个扩展库,专门用于科学和工程应用,特别是2D图形的绘制,如曲线图、柱状图、饼图等。Qwt库提供了丰富的图表组件,使得开发者可以方便地构建具有专业级图表功能的应用。 3. **柱状图**:...

    tASP.net中绘制饼图与棒图(柱状图)源码C#语言版

    饼图和柱状图是常见的数据表示方式,本资源提供了一种使用C#语言在ASP.NET环境中绘制这两种图表的方法。接下来,我们将深入探讨如何在C#中实现饼图和柱状图的绘制。 首先,我们需要引入必要的命名空间。在ASP.NET中...

    微信小程序Canvas绘制曲线图、饼图、柱状图、雷达图/蛛网图源码

    在微信小程序中,Canvas是一个非常重要的组件,它允许开发者通过JavaScript进行绘图操作,从而实现各种复杂的图形界面。...通过对曲线图、饼图、柱状图和雷达图的绘制实践,开发者可以进一步提升自己的小程序开发技能。

    jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】

    在本实例中,我们将详细探讨如何使用jQuery插件HighCharts来绘制2D柱状图、折线图和饼图的组合图。这将帮助我们以视觉化的方式展示数据,比如在销售报告中显示各天的销售额以及它们的平均值,并通过饼图展示销售比例...

    wpf柱状图饼图曲线图控件

    标题提到的“wpf柱状图饼图曲线图控件”提供了一种便捷的方式来实现这些图表类型,无需进行过多的自定义开发。 **WPF(Windows Presentation Foundation)** 是.NET框架的一部分,它提供了构建桌面应用的全面图形层...

    VC图表绘制类,支持柱状图,饼图,折线图.zip

    在本文中,我们将深入探讨如何使用Visual C++(VC)进行图表绘制,特别是通过一个专为VS2010设计的类库实现柱状图、饼图和折线图的绘制。这个压缩包文件包含了一个实用的工具,可以帮助开发者轻松地在应用程序中创建...

    echart实现3D柱状图效果

    ECharts 是百度开发的一款开源的、轻量级的数据可视化工具,支持多种图表类型,如柱状图、折线图、饼图等,并且具有良好的交互性和自适应性。ECharts.gl 是 ECharts 的一个扩展库,专门用于3D图表的绘制,它基于 ...

    UMG图表控件+UE5插件+曲线图、饼图、环状图、柱状图

    首先,UMG图表控件支持四种主要类型的图表:曲线图、饼图、环状图和柱状图。这些图表类型在许多场景中都非常实用,例如游戏中的数据显示、数据分析界面或者复杂的用户界面设计。 1. 曲线图(Line Chart):适用于...

    C++ 3D饼形图 2d柱状图曲线图

    "C++ 3D饼形图 2d柱状图曲线图"的实现,是为了解决在C++环境中创建动态和自定义图表的需求。下面将详细阐述这些图表类型以及如何在C++中实现它们。 首先,3D饼形图是一种展示数据比例关系的图形,常用于表示整体与...

    C# 3D 饼图 PieChart 三维

    这个库包含各种类型的图表,如饼图、柱状图、线图等,支持2D和3D显示。 2. **创建3D饼图** 要创建3D饼图,首先需要实例化一个Chart对象,并设置其Type属性为Pie。然后通过Series集合添加数据系列,每个系列代表...

    三图巧用(折线、饼图、柱状图)

    在数据分析和信息可视化的过程中,折线图、饼图和柱状图是最常用且重要的图表类型。这三种图形各自有其独特的优势,适用于不同类型的数据显示,帮助我们更好地理解数据分布和趋势。 首先,让我们来深入了解折线图。...

    Chartjs曲线图、柱状图、饼状图等多种统计图

    Chart.js是一款轻量级的JavaScript库,专门用于创建各种类型的统计图表,如曲线图、柱状图和饼状图等。它以其简单易用、高效和可定制化的特性深受开发者喜爱,广泛应用于数据可视化项目中。下面将详细介绍Chart.js在...

    基于ECharts GL的3D图表展示设计与实现

    ECharts,作为一款由百度开发的开源JavaScript图表库,提供了丰富的2D图表类型。而ECharts GL则是ECharts的一个扩展,专为处理大规模数据和提供高级3D图表而设计。本文将深入探讨如何利用ECharts GL进行3D图表的设计...

    java利用jQuery生成饼图,折线图,柱状图

    本篇文章将深入探讨如何在Java项目中结合jQuery生成饼图、柱状图和折线图,帮助开发者提升数据展示的直观性。 首先,我们需要明白jQuery本身并不直接支持生成图表,但可以通过与第三方图表库结合来实现。例如,我们...

    FusionCharts2D3D报表统计源码.rar

    在这个"**FusionCharts2D3D报表统计源码.rar**"压缩包中,您将找到一个基于FusionCharts进行二次开发的示例项目,它包括了柱状图、饼图、折线图以及地图等多种图表,用于展示销售统计信息,并且所有数据都是动态读取...

    vb6利用mschat控件实现绘图功能,后台数据才用ACCESS,饼图,曲线图,柱状图。并可以实现手动调整

    在VB6(Visual Basic 6)开发环境中,MSChat控件是一种非常实用的工具,它提供了丰富的图形绘制功能,能够帮助开发者轻松创建出各种图表,如饼图、曲线图和柱状图。在这个项目中,开发者巧妙地利用了MSChat控件与...

Global site tag (gtag.js) - Google Analytics