转载总结一些关于Google chart api的知识
<script type="text/javascript">
google.setOnLoadCallback(drawChartLine);
function drawChartLine() {
var data = google.visualization.arrayToDataTable([
['2班学生学号', '年级排名','排名波动值'],
['7', 7,21.46],
['5', 28,42.63],
['14', 37,82.43],
['13', 85,65.04],
['8', 123,79.20],
['10',134,156.82],
['4', 157,143.88],
['11', 203,139.14],
['12', 234,131.37],
['15', 234,109.15],
['19', 257,135.66],
['6', 267,61.55],
['2', 274,154.25],
['9', 282,101.60],
['3', 321,112.91],
['17', 378,95.53],
['18', 434,29.61],
['1', 468,61.34],
['20', 478,50.08],
['16', 518,9.07]
]);
var options = {
title: '2011-2012期末考试2班学生年级排名和波动值',
hAxis: {title: '2班学生学号', titleTextStyle: {fontSize:18},},
vAxis: { titleTextStyle: {fontSize:18},gridlines:{color: 'pink', count: 6}},
titleTextStyle:{fontSize:8}
/*legend:{position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}//调节图例标注的样式*/
};
/*
*textPosition 表示坐标文字的位置 有in和out两个参数 表示在坐标轴的内部还是外部
*hAxis.slantedText:true 表示x轴坐标的坐标值以一个角度显示,false表示垂直显示
*slantedTextAngle:70 可选值是1-90 调整文字偏斜的角度 此处为70度
*showTextEvery:2 表示当坐标值过密 过挤的时候 可以调节显示的数字的多少 1表示显示所有 2表示显示相邻的
*direction:-1 表示坐标系内的图形以各种方向显示 -1表示倒过来显示,但是水平方向的direction表示内容由小到大和由大到小
*series: {0:{color: 'black', visibleInLegend: true}, 1:{color: 'green', visibleInLegend: false}},
这个可以修来修改各个轴的显示颜色和说明图例是否显示
*minorGridlines:{color:'green',count:5} 用来表示Y轴的每个坐标轴区段之间的样式划分 比如Y轴标注了2 4 6 8,那他划分的就是2-4 4-6 6-8 之间的样式 比如内部线为绿色 每个区段里又有5条线
*logScale:true 用来以对数形式 表现Y轴的数值 可显示小数点 前提是 必须均为正数
*vAxis vertical垂直方向的属性
vAxis.direction:1表示图标正向显示
-1表示倒过来显示
hAxis.gridlines 表示horizon水平方向轴 X轴的网格线 的颜色和数量
数量可以提高垂直轴的精度,反过来 垂直方向的网格也可以提高水平轴的精度
*/
var chart= new google.visualization.LineChart(document.getElementById('chart_div_1ine'));
$(window).on('debouncedresize', function() { chart.draw(data, options); });
chart.draw(data, options);
}
$(function(){
var $height=$(".sideTip").get(0).offsetHeight;
$(".sideTip").css("marginTop",-$height/2);
});
</script>
转载总结一些关于Google chart api的知识的更多相关文章
- Google Chart API 参考 中文版
Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
- 使用Google Chart API绘制组合图
Google Chart API 绘图 组合图作者:方倍工作室 地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...
- 使用google chart api生成报表图片
使用google chart api生成报表图片 截图 折线图 饼图 柱状图 实现方法 原理是调用google的报表服务,动态拼接url字符串,得到一张图片,数据和说明文字都是从url中传进去的. ...
- 利用 Google Chart API 生成二维码大小不一致
大小不一致是由于 chl 参数内容不一样导致的,而 chs 参数只能指定生成图片的大小,不能指定生成具体二维码大小. 比如:https://chart.googleapis.com/chart?ch ...
- google map api v2的使用详细过程,图文并茂(原创)
上一篇中说到怎么获取key,下面来介绍怎么使用key来显示google地图 步骤1:eclipse上打开android SDK Manager,安装google play services. 步骤2: ...
- Asp.net MVC集成Google Calendar API(附Demo源码)
Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...
- chart API笔记
1. 参数说明 http://chart.apis.google.com/chart? chs=250x100 &chd=t:60,40 &cht=p3 &chl=Hello| ...
- 在云平台上基于Go语言+Google图表API提供二维码生成应用
二维码能够说已经深深的融入了我们的生活其中.到处可见它的身影:但通常我们都是去扫二维码, 曾经我们分享给朋友一个网址直接把Url发过去,如今我们能够把自己的信息生成二维码再分享给他人. 这里就分享一下 ...
- 使用google 语言 api 来实现整个网站的翻译
---恢复内容开始--- 使用google 语言 api 来实现整个网站的翻译,这时我们可以利用免费的google api来做处理来实现多语言的功能. 放在 HTML 文件中 <div id=& ...
随机推荐
- javascript高级程序设计读书笔记
第2章 在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...
- 怎样成为一名PHP专家?
当浏览各类与PHP相关的博客时,比如Quora上的问题,谷歌群组,简讯和杂志,我经常注意到技能的等级分化.问题都类似于“我如何连接到MySQL数据库?”或者“我该如何扩展邮件系统才能在每小时发送超过一 ...
- sed找到重复的行
sed之仅打印相邻重复的行 cat file aaa bbb bbb ccc ddd eee eee fff 只显示重复的行: bbb bbb eee eee sed -n ':a;N;/\ ...
- git指令
返回当前目录路径: $ pwd 1.1 git add git add . #将文件先暂存到staging area, stages new and modified, without deleted ...
- 深入理解Java虚拟机 - 垃圾收集算法与垃圾收集器
1. 垃圾收集算法 JVM的垃圾收集算法在不同的JVM实现中有所不同,且在平时工作中一般不会深入到收集算法,因此只对算法做较为简单的介绍. 1.1 标记-清除算法 ...
- SPOJ DQUERY:D-query
主席树/树状数组.给一个区间,多次询问[l,r]内有多少个不重复的元素.每个前缀都建线段树,询问直接r的[l,r]就可以了.(似乎对主席树有一点了解了?...话说spoj好高级的样子... #incl ...
- BZOJ_1021_[SHOI2008]_Debt循环的债务_(DP)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1021 三个人相互欠钱,给出他们每个人各种面额的钞票各有多少张,求最少需要传递多少张钞票才能把账 ...
- Java [leetcode 33]Search in Rotated Sorted Array
题目描述: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 ...
- Java [leetcode 21]Merge Two Sorted Lists
题目描述: Merge two sorted linked lists and return it as a new list. The new list should be made by spli ...
- C# 两个ListBox 数据互传-基础操作
先看效果图: 两个服务设施列,左边:lbFacility1,右边:lbFacility2,中间向左向右箭头. 如果只是单纯的向左向右移动,那很简单. 因为项目遇到要获取选中项的ID,通过给ListBo ...