项目需求,前一阵子利用google chart生成了一些图表.但最终由于扩展性差,且依赖于google,所以放弃了.这里做个备份,以防日后需要用到.对于复杂一些的图表,数据砌得相当头晕!
首先是一个简单的pie chart:
然后是个比较复杂的bar chart:
再是一个比较有意思的map chart:
具体的参数意思可查阅google chart api.
http://code.google.com/intl/zh-CN/apis/chart/docs/making_charts.html
如果提交这么一串URL怪恐怖的,而GET方式提交的数据最多只能是1024字节,就是说如果你的数据量超过这个大小,就不能提交了.所以google chart也提供了post的方式,而post方式理论上是不限大小的.
API上提供的例子是非ajax的,是通过提交表单,刷新页面而显示图片的;但AJAX又存在跨域问题(向google chart post数据超).所以是不能通过ajax post数据得到图表的.如果想无刷新获得图表,可以通过提交form 至指定的 iframe ,在iframe中打开:
<form action='https://chart.googleapis.com/chart' method='POST' id='chart' target="iframe"
onsubmit="this.action = 'https://chart.googleapis.com/chart?chid=' + (new Date()).getMilliseconds(); return true;">
</form>
<iframe src="https://chart.googleapis.com/chart" name="iframe" height="516" width="809"></iframe>
然后要做的就是要将post的数据append至form中.
分享到:
相关推荐
首先,使用谷歌图表的步骤通常包括以下几个部分: 1. 准备数据:数据可以是JSON、CSV或者HTML表格形式,根据需求选择合适的方式存储和传递数据。 2. 引入库:在HTML文件中引入谷歌图表的API,通常通过添加以下脚本...
接下来,创建一个对应的视图`Index.cshtml`,在这个视图中我们将使用Chart控件来渲染图表。首先,我们需要在视图的顶部引入必要的脚本和CSS,然后定义一个`<div>`元素作为图表的容器: ```html @model ...
标题“Google Chart 不需要联网”可能意味着在特定情况下或通过特定方法,我们可以使用Google图表API创建图表,即使没有网络连接也能实现。这通常涉及到离线使用Google图表库或者提前下载必要的资源。接下来,我们将...
在使用Google Chart API之前,开发者需要了解几个关键点: 1. API请求的URL格式应遵循特定的结构,包括基础URL和一系列参数,每个参数由名称和值组成,多个参数之间使用"&"符号分隔。 2. 必须的参数有三个:图表...
"Ext.ux.GoogleChart"就是这样一个插件,它允许开发者在ExtJS应用中集成Google Charts,以展示各种复杂的数据可视化图表。 Google Charts 是Google提供的一种免费服务,它提供了多种图表类型,如柱状图、折线图、...
Chart控件通常包含以下几个关键组成部分: 1. 数据源:Chart控件的数据来源,可以是数据库、数组、XML文件或其他数据结构。 2. 系列(Series):每个系列代表一种数据类型,比如一个折线图或柱状图,可以在图表上...
"angular-google-chart-master"可能是项目源代码的主目录,通常包含项目的基本结构,如以下几个部分: 1. `README.md`:项目介绍、安装指南和使用说明。 2. `src`:源代码文件夹,可能包括AngularJS控制器、服务、...
在饼图项目中,我们可以期待以下几个关键知识点: 1. **AngularJS**: AngularJS是Google维护的一个开源JavaScript框架,它遵循MVC(模型-视图-控制器)设计模式,使得前端开发更加结构化。该项目利用AngularJS的...
3. **绘制图表**:利用ASP内置函数或者第三方库(如Chart.js、Google Charts等,尽管这些通常是JavaScript库,但可以通过在ASP页面中嵌入JS代码来使用)创建图表。 4. **设置参数**:根据上述描述中的参数设置图表的...
**Google Chart API** 是一个简单的Web服务,允许用户轻松地从数据创建图表并嵌入到网页中。其主要特点包括: - **简单易用**:仅需通过简单的URL字符串即可创建图表,无需安装额外的插件或JavaScript库。 - **广泛...
在"Open-Flash-Chart2.0"中,主要知识点包括以下几个方面: 1. **Flash技术**:作为图表库的基础,Flash提供了跨平台的图形渲染能力,能够在大多数现代浏览器上运行,为用户带来流畅的动画效果和良好的视觉体验。...
2. 图表库选择:Java Web中有许多优秀的图表库可供选择,如JFreeChart、Google Charts API、Chart.js、Highcharts等。这些库提供了丰富的图表类型和自定义选项。 3. 图表渲染:使用选定的库将数据转化为图表,这可能...
在实现过程中,我们需要考虑以下几个关键步骤: - **数据处理与图表生成**: 首先,将数据整理成适合展示的格式,并使用前端图表库(如ECharts、D3.js或Highcharts)生成图表。确保图表具有合适的尺寸和分辨率,以便...
它具备以下几个特点: 1. **简单易用**:Highcharts 提供了一套简单直观的 API 接口,方便开发者快速上手。 2. **美观**:生成的图表样式美观,能够提升用户体验。 3. **跨平台和跨浏览器兼容性**:Highcharts 能够...
在学习Java Web动态图表编程时,你需要掌握以下几个关键点: 1. **Java Web基础**:理解Servlet、JSP、MVC模式等基础概念,熟悉HTTP协议。 2. **数据处理**:了解SQL查询,能够处理和组织数据。 3. **图形库使用**...
chartType: 'ColumnChart', // 可选的图表类型有'ColumnChart', 'LineChart', 'PieChart'等 width: 600, // 图表宽度 height: 400, // 图表高度 colors: ['#FF6600', '#3399FF'] // 数据系列的颜色 }); }); ```...
标题中的“google谷歌flash股票源代码”指的是Google曾经使用Flash技术开发的一款用于展示股票实时数据的应用程序的源代码。在互联网早期,Flash由于其强大的图形渲染能力和交互性,被广泛用于创建动态网页内容,...
在IT领域,这种基于地图的选择和动态图表技术涉及以下几个关键知识点: 1. **地理信息系统(GIS)**:GIS是一种集成硬件、软件和数据的系统,用于收集、存储、管理、分析和展示所有类型地理位置信息。在这个案例中...
金钟图目录 直播: : 代码位于此处: : 基本信息 我的第四个Python项目。...允许您仅搜索,隔离和显示单个或几个图表。 假设您已经知道海图编号,并想查看它们的覆盖范围和/或比例尺信息,上一版日期和给水手的通知。
***中使用jQuery和Google Chart API实现图表插件 ***作为微软推出的一款用于构建动态网站的开发框架,它支持多种服务器端编程语言如C#和***。在开发数据可视化功能时,借助第三方库可以提高开发效率,并且能增加...