`
chembo
  • 浏览: 940912 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

google chart几个图表的使用

阅读更多
项目需求,前一阵子利用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中.
0
1
分享到:
评论

相关推荐

    google 图表(chart)

    首先,使用谷歌图表的步骤通常包括以下几个部分: 1. 准备数据:数据可以是JSON、CSV或者HTML表格形式,根据需求选择合适的方式存储和传递数据。 2. 引入库:在HTML文件中引入谷歌图表的API,通常通过添加以下脚本...

    asp.net mvc chart(MVC 使用chart图表控件的示例)

    接下来,创建一个对应的视图`Index.cshtml`,在这个视图中我们将使用Chart控件来渲染图表。首先,我们需要在视图的顶部引入必要的脚本和CSS,然后定义一个`&lt;div&gt;`元素作为图表的容器: ```html @model ...

    Google Chart 不需要联网

    标题“Google Chart 不需要联网”可能意味着在特定情况下或通过特定方法,我们可以使用Google图表API创建图表,即使没有网络连接也能实现。这通常涉及到离线使用Google图表库或者提前下载必要的资源。接下来,我们将...

    Google Chart 二次开发者指南

    在使用Google Chart API之前,开发者需要了解几个关键点: 1. API请求的URL格式应遵循特定的结构,包括基础URL和一系列参数,每个参数由名称和值组成,多个参数之间使用"&"符号分隔。 2. 必须的参数有三个:图表...

    Ext.ux.GoogleChart extjs插件

    "Ext.ux.GoogleChart"就是这样一个插件,它允许开发者在ExtJS应用中集成Google Charts,以展示各种复杂的数据可视化图表。 Google Charts 是Google提供的一种免费服务,它提供了多种图表类型,如柱状图、折线图、...

    Chart控件开发

    Chart控件通常包含以下几个关键组成部分: 1. 数据源:Chart控件的数据来源,可以是数据库、数组、XML文件或其他数据结构。 2. 系列(Series):每个系列代表一种数据类型,比如一个折线图或柱状图,可以在图表上...

    前端项目-angular-google-chart.zip

    "angular-google-chart-master"可能是项目源代码的主目录,通常包含项目的基本结构,如以下几个部分: 1. `README.md`:项目介绍、安装指南和使用说明。 2. `src`:源代码文件夹,可能包括AngularJS控制器、服务、...

    前端项目-pie-chart.zip

    在饼图项目中,我们可以期待以下几个关键知识点: 1. **AngularJS**: AngularJS是Google维护的一个开源JavaScript框架,它遵循MVC(模型-视图-控制器)设计模式,使得前端开发更加结构化。该项目利用AngularJS的...

    asp图表代码

    3. **绘制图表**:利用ASP内置函数或者第三方库(如Chart.js、Google Charts等,尽管这些通常是JavaScript库,但可以通过在ASP页面中嵌入JS代码来使用)创建图表。 4. **设置参数**:根据上述描述中的参数设置图表的...

    几款流行的图表组件的功能对比

    **Google Chart API** 是一个简单的Web服务,允许用户轻松地从数据创建图表并嵌入到网页中。其主要特点包括: - **简单易用**:仅需通过简单的URL字符串即可创建图表,无需安装额外的插件或JavaScript库。 - **广泛...

    open-flash-chart2.0

    在"Open-Flash-Chart2.0"中,主要知识点包括以下几个方面: 1. **Flash技术**:作为图表库的基础,Flash提供了跨平台的图形渲染能力,能够在大多数现代浏览器上运行,为用户带来流畅的动画效果和良好的视觉体验。...

    Java Web动态图表编程 最新版本20120213

    2. 图表库选择:Java Web中有许多优秀的图表库可供选择,如JFreeChart、Google Charts API、Chart.js、Highcharts等。这些库提供了丰富的图表类型和自定义选项。 3. 图表渲染:使用选定的库将数据转化为图表,这可能...

    纯前端word带图表导出

    在实现过程中,我们需要考虑以下几个关键步骤: - **数据处理与图表生成**: 首先,将数据整理成适合展示的格式,并使用前端图表库(如ECharts、D3.js或Highcharts)生成图表。确保图表具有合适的尺寸和分辨率,以便...

    Hightcharts 案例 图表 报表

    它具备以下几个特点: 1. **简单易用**:Highcharts 提供了一套简单直观的 API 接口,方便开发者快速上手。 2. **美观**:生成的图表样式美观,能够提升用户体验。 3. **跨平台和跨浏览器兼容性**:Highcharts 能够...

    精通Java Web动态图表编程.rar

    在学习Java Web动态图表编程时,你需要掌握以下几个关键点: 1. **Java Web基础**:理解Servlet、JSP、MVC模式等基础概念,熟悉HTTP协议。 2. **数据处理**:了解SQL查询,能够处理和组织数据。 3. **图形库使用**...

    gvChar图表插件 用jQuery实现电子图表(兼容各浏览器)

    chartType: 'ColumnChart', // 可选的图表类型有'ColumnChart', 'LineChart', 'PieChart'等 width: 600, // 图表宽度 height: 400, // 图表高度 colors: ['#FF6600', '#3399FF'] // 数据系列的颜色 }); }); ```...

    google谷歌flash股票源代码

    标题中的“google谷歌flash股票源代码”指的是Google曾经使用Flash技术开发的一款用于展示股票实时数据的应用程序的源代码。在互联网早期,Flash由于其强大的图形渲染能力和交互性,被广泛用于创建动态网页内容,...

    8贵州基于地图选择的动态图表鼠标点击版贵州地图共17页.p

    在IT领域,这种基于地图的选择和动态图表技术涉及以下几个关键知识点: 1. **地理信息系统(GIS)**:GIS是一种集成硬件、软件和数据的系统,用于收集、存储、管理、分析和展示所有类型地理位置信息。在这个案例中...

    chart-coverage-reader:桌面应用程序的改进的Web版本。 在Google Maps上显示金钟图表的覆盖范围

    金钟图目录 直播: : 代码位于此处: : 基本信息 我的第四个Python项目。...允许您仅搜索,隔离和显示单个或几个图表。 假设您已经知道海图编号,并想查看它们的覆盖范围和/或比例尺信息,上一版日期和给水手的通知。

    asp.net中一款极为简单实用的图表插件(jquery)

    ***中使用jQuery和Google Chart API实现图表插件 ***作为微软推出的一款用于构建动态网站的开发框架,它支持多种服务器端编程语言如C#和***。在开发数据可视化功能时,借助第三方库可以提高开发效率,并且能增加...

Global site tag (gtag.js) - Google Analytics