通过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资源目录下。
相关推荐
JFreeChart是一个强大的Java图形库,它提供了多种图表类型,包括曲线图、饼图和柱状图,且支持2D和3D效果。本篇文章将深入探讨如何使用JFreeChart来创建这些类型的图表,并通过提供的图片示例(PieChart.jpg、line....
在本文中,我们将深入探讨如何使用QCustomPlot库在Qt环境中绘制饼状图和柱状图。QCustomPlot是一个强大的2D绘图库,它提供了丰富的功能,允许开发者自定义图表,以满足各种数据可视化需求。 首先,让我们了解饼状图...
JFreeChart是一款强大的Java图表库,它允许开发者在Java应用程序或网页中生成各种高质量的图形,包括饼图、折线图、柱状图等。在本示例中,我们将深入探讨如何利用JFreeChart库来创建这些常见的图表类型。 ### 饼图...
JFreeChart 是一个开源的Java库,用于生成高质量的2D图表,如折线图、饼图、柱状图和堆栈柱状图等。它广泛应用于数据分析、报告和应用程序中,提供丰富的自定义选项来满足各种视觉需求。在本项目中,你将找到能够...
2. **Qwt库**:Qwt是Qt的一个扩展库,专门用于科学和工程应用,特别是2D图形的绘制,如曲线图、柱状图、饼图等。Qwt库提供了丰富的图表组件,使得开发者可以方便地构建具有专业级图表功能的应用。 3. **柱状图**:...
饼图和柱状图是常见的数据表示方式,本资源提供了一种使用C#语言在ASP.NET环境中绘制这两种图表的方法。接下来,我们将深入探讨如何在C#中实现饼图和柱状图的绘制。 首先,我们需要引入必要的命名空间。在ASP.NET中...
在微信小程序中,Canvas是一个非常重要的组件,它允许开发者通过JavaScript进行绘图操作,从而实现各种复杂的图形界面。...通过对曲线图、饼图、柱状图和雷达图的绘制实践,开发者可以进一步提升自己的小程序开发技能。
在本实例中,我们将详细探讨如何使用jQuery插件HighCharts来绘制2D柱状图、折线图和饼图的组合图。这将帮助我们以视觉化的方式展示数据,比如在销售报告中显示各天的销售额以及它们的平均值,并通过饼图展示销售比例...
标题提到的“wpf柱状图饼图曲线图控件”提供了一种便捷的方式来实现这些图表类型,无需进行过多的自定义开发。 **WPF(Windows Presentation Foundation)** 是.NET框架的一部分,它提供了构建桌面应用的全面图形层...
在本文中,我们将深入探讨如何使用Visual C++(VC)进行图表绘制,特别是通过一个专为VS2010设计的类库实现柱状图、饼图和折线图的绘制。这个压缩包文件包含了一个实用的工具,可以帮助开发者轻松地在应用程序中创建...
ECharts 是百度开发的一款开源的、轻量级的数据可视化工具,支持多种图表类型,如柱状图、折线图、饼图等,并且具有良好的交互性和自适应性。ECharts.gl 是 ECharts 的一个扩展库,专门用于3D图表的绘制,它基于 ...
"C++ 3D饼形图 2d柱状图曲线图"的实现,是为了解决在C++环境中创建动态和自定义图表的需求。下面将详细阐述这些图表类型以及如何在C++中实现它们。 首先,3D饼形图是一种展示数据比例关系的图形,常用于表示整体与...
这个库包含各种类型的图表,如饼图、柱状图、线图等,支持2D和3D显示。 2. **创建3D饼图** 要创建3D饼图,首先需要实例化一个Chart对象,并设置其Type属性为Pie。然后通过Series集合添加数据系列,每个系列代表...
在数据分析和信息可视化的过程中,折线图、饼图和柱状图是最常用且重要的图表类型。这三种图形各自有其独特的优势,适用于不同类型的数据显示,帮助我们更好地理解数据分布和趋势。 首先,让我们来深入了解折线图。...
首先,UMG图表控件支持四种主要类型的图表:曲线图、饼图、环状图和柱状图。这些图表类型在许多场景中都非常实用,例如游戏中的数据显示、数据分析界面或者复杂的用户界面设计。 1. 曲线图(Line Chart):适用于...
Chart.js是一款轻量级的JavaScript库,专门用于创建各种类型的统计图表,如曲线图、柱状图和饼状图等。它以其简单易用、高效和可定制化的特性深受开发者喜爱,广泛应用于数据可视化项目中。下面将详细介绍Chart.js在...
ECharts,作为一款由百度开发的开源JavaScript图表库,提供了丰富的2D图表类型。而ECharts GL则是ECharts的一个扩展,专为处理大规模数据和提供高级3D图表而设计。本文将深入探讨如何利用ECharts GL进行3D图表的设计...
本篇文章将深入探讨如何在Java项目中结合jQuery生成饼图、柱状图和折线图,帮助开发者提升数据展示的直观性。 首先,我们需要明白jQuery本身并不直接支持生成图表,但可以通过与第三方图表库结合来实现。例如,我们...
在这个"**FusionCharts2D3D报表统计源码.rar**"压缩包中,您将找到一个基于FusionCharts进行二次开发的示例项目,它包括了柱状图、饼图、折线图以及地图等多种图表,用于展示销售统计信息,并且所有数据都是动态读取...
在VB6(Visual Basic 6)开发环境中,MSChat控件是一种非常实用的工具,它提供了丰富的图形绘制功能,能够帮助开发者轻松创建出各种图表,如饼图、曲线图和柱状图。在这个项目中,开发者巧妙地利用了MSChat控件与...