此为文章备份，原文出处（我的网站）

网页绘制图表 Google Charts with JavaScript....好强、好简单啊！#1

http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx

今天看见 g+一篇文章 http://inspiredtoeducate.net/inspiredtoeducate/?p=1319

因而发觉这个东西。

我先连到 Google原厂网站，看了一下说明与范例  https://developers.google.com/chart/interactive/docs/quick_start

几乎没有大改，

光是从原厂范例修正一下，就能作出这种怪物等级的应用

本范例源自一开始介绍的文章

*******************************************************************************************************

右侧上方的 Tab（分页）可选三种图表来呈现

这里的时间轴，可以变成「动画」，图表会动！

*******************************************************************************************************

抱歉，请您点选图片，就能连去这范例的网站，可以现场Demo

请来看一下 Google原厂的 Demo网站

https://developers.google.com/chart/interactive/docs/gallery/geochart

要学习也不难喔。

出乎意料的简单！

==================================================================

我的教学影片，https://www.youtube.com/watch?v=lXkmN4tl_ew

==================================================================

点选图片可连到 Google Charts原厂网站的教学

范例如下（基本架构）：

01

<html>

02

<head>

03

<!--Load the AJAX API-->

04

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
       

05

<script type="text/javascript">

06

07

// Load the Visualization API and the piechart package.

08

google.load('visualization', '1.0', {'packages':['corechart']});

09

10

// Set a callback to run when the Google Visualization API is loaded.

11

google.setOnLoadCallback(drawChart);

12

13

// Callback that creates and populates a data table,

14

// instantiates the pie chart, passes in the data and

15

// draws it.

16

function drawChart() {

17

18

// Create the data table.  ******原始资料******

19

20

var data = new google.visualization.DataTable();

21

data.addColumn('string', 'Topping');

22

data.addColumn('number', 'Slices');

23

data.addRows([

24

['Mushrooms', 3],

25

['Onions', 1],

26

['Olives', 1],

27

['Zucchini', 1],

28

['Pepperoni', 2]

29

]);

30

31

// *********************差异之处*************************

32

// Set chart options

33

var options = {'title':'How Much Pizza I Ate Last Night',

34

'width':400,

35

'height':300};

36

37

// Instantiate and draw our chart, passing in some options.

38

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

39

chart.draw(data, options);

40

}

41

</script>

42

</head>

43

44

<body>

45

<!--Div that will hold the pie chart-->

46

<div id="chart_div"></div>

47

</body>

48

</html>

各位可以发现：

1. 一开始先设定（引用）必要的 JavaScript与API

2. 然后放入一些基本数据（RowData）

3. 最后.......搞定。

图表会出现在这里 <div id="chart_div"></div>

鼠标点选右侧的 Icon，网页图表会有显著标记

鼠标移到这一区块，还有 Tooltip说明

上过我的课，买过我的书的读者

您可以知道我强调「模板」，架构完整的范本，立即可用、可改

Google原厂的范例跟上面的应用，两者的程序代码几乎一样

差异只有：

(1). 一开始，引用的地方，注明您要做什么图表？

原厂范例：  google.load('visualization', '1.0', { 'packages': ['corechart'] });

修改后的范例：google.load('visualization', '1', { 'packages': ['motionchart'] });

(2).  Raw Data（原始资料）的多寡

(3). 最后两段的程序代码有差异：

原厂：

// Set chart options

var options = {

'title': 'How Much Pizza I Ate Last Night',

'width': 400,

'height': 300

};

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

chart.draw(data, options);

修改后的应用：

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

chart.draw(data, { width: 600, height: 300 });

上面两个范例，可在此下载：Google_Chart.rar

我已经准备好 10个范例，将会在我的 ASP.NET课程中介绍给大家。

图表总类有多少呢？（还在成长、追加）

Chart Gallery

Playground

Miscellaneous Examples

Area Charts

Bar Charts

Bubble Charts

Candlestick Charts

Column Charts

Combo Charts

Diff ChartsN

Gauge Charts

Geo Charts

HistogramsNew!

IntervalsNew!

Line Charts

Maps

Org Charts

Pie Charts

Scatter Charts

Stepped Area Charts

Table Charts

TimelinesNew!

Tree Map Charts

TrendlinesNew!

当然也可以从 Google Sheet（电子表格）当成数据源，然后在网页上做图表

看看这个范例 http://inspiredtoeducate.net/inspiredtoeducate/?p=1319

Google Charts 太好用了，以后用不到怎么办？

    太黯然了~~~

       太销魂了

图片来源：http://www.ipeen.com.tw/comment/413694

请看下一篇范例

黯然销魂 之 网页绘制图表 Google Charts with JavaScript....与ASP.NET网页ClientScriptManager.RegisterStartupScript 方法

网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊！的更多相关文章

  1. 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...

  2. ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲

    ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 1.  网页绘制图表 Googl ...

  3. 9款很棒的网页绘制图表JavaScript框架脚本

    推荐9款很棒的可在网页中绘制图表的JavaScript脚本,这些有趣的JS脚本可以帮助你快速方便的绘制图表(线.面.饼.条…),其中包括jQuery.MooTools.Prototype和一些其它的J ...

  4. Qt 绘制图表 - Qt Charts版

    一.前言 自从 Qt 发布以来,给广大跨平台界面研发人员带来了无数的福利.但是Qt自己却一直没有提供自带的图表库,这就使得 QWT.QCustomPlot 等第三方图表库有了巨大的生存空间,为了降低开 ...

  5. 10 个超炫绘制图表图形的 Javascript 插件【转载+整理】

    原文地址 现在,有很多在线绘制图表和图形(Charts and Graphs)的 JavaScript 插件,这些插件还都是免费,以及图表库.这些插件大量出现的原因是基于一个事实:人们不再依赖于 Fl ...

  6. jQuery插件-jgcharts实现Javascript制作Google Charts

    from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...

  7. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  8. iOS - Quartz 2D 第三方框架 Charts 绘制图表

    1.Charts 简介 使用第三方框架 Charts 绘制 iOS 图表.GitHub 源码 Charts Charts 是一款用于绘制图表的框架,可以绘制柱状图.折线图.K线图.饼状图等.Chart ...

  9. 数据可视化(6)--Google Charts实例

    上头给的关于jqplot的问题暂时解决了,继续google charts. google charts的实例很多,就以区域图(Geochart)为例~~ 区域图(Geochart)是一个国家.大陆或者 ...

随机推荐

  1. OC基础(24)

    NSMutableArray基本概念 NSDictionary基本概念 NSMutableDictionary基本概念 常见的结构体 *:first-child { margin-top: 0 !im ...

  2. android 提高进程优先级 拍照永不崩溃（闪退）

    首先科普一下Android系统进程的优先级: 当系统的内存不足时, android系统将根据进程优先级选择杀死一些不太重要的进程. 进程优先级从高到低分别为: 1. 前台进程. 以下的进程为前台进程: ...

  3. THE ONE THING PEOPLE WILL MASSIVELY OVERPAY FOR (有一个东西人们是愿意出高价购买的)

    THE ONE THING PEOPLE WILL MASSIVELY OVERPAY FOR有一个东西人们是愿意出高价购买的 by GARY VAYNERCHUK 点此直达湾区日报简评 I don' ...

  4. VIM安装 NERDTREE,SOLARIZED 插件

    实验系统版本及VIM版本 系统:CentOS6.3 VIM:7.2 插件介绍 (附上一张效果图) nerdtree(在窗口左侧用于浏览目录结构的插件) solarized(一个自己认为比较护眼的vim ...

  5. ORA-01810: 格式代码出现两次

    今天在修改SQL语句的时候遇到这个小问题,提示的还是比较明显的,当然解决之道我是从百度上摘取的! 错误语句段:AND V.UPLOAD_DATE <=TO_DATE ('2013-11-11 2 ...

  6. 洛谷P1458 顺序的分数 Ordered Fractions

    P1458 顺序的分数 Ordered Fractions 151通过 203提交 题目提供者该用户不存在 标签USACO 难度普及- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 输入一个 ...

  7. java web学习

    一直想下决心好好学下java web,但是总是间断,虽然我的方向是ios,但是觉得后台也是相当重要,毕竟移动端实际上更多也就是展示后台拉取到的信息,搞移动端的不能总是受制于后台,各位看官觉得呢? 这两 ...

  8. 【Hibernate 9】悲观锁和乐观锁

    一.锁的基本简介 1.1,为什么需要锁 首先,锁的概念产生,主要是为了解决并发性的问题.什么是并发性问题呢,比如: Angel现在银行有个账号,里面有存款1000块.现在,Angel的账户,在两个地方 ...

  9. Windows API学习---插入DLL和挂接API

    插入DLL和挂接API 在Microsoft Windows中,每个进程都有它自己的私有地址空间.当使用指针来引用内存时,指针的值将引用你自己进程的地址空间中的一个内存地址.你的进程不能创建一个其引用 ...

  10. 【Linux】freetds安装配置连接MSSQL

    我使用的是freetds-0.91,下载地址:http://pan.baidu.com/s/1hq68rZY 安装编译(根据需要unixodbc): [root@zabbixserver / ]# t ...