基于jquery框架、google chart tools图形报表gvChart的应用心得
本文共 7658 字，大约阅读时间需要 25 分钟。
首先，介绍下gvChart：gvChart是一个利用Google Chart Tools来创建交互式图表（Charts）的jQuery插件。可创建的图表类型有Area、Line、Bar、Column和Pie五种。它使用HTML Tables做数据源来创建图表。
准备工作：引入JS
红色部分为google的chart tools框架的引用，必须要引用并在js方法中调用方法gvChartInit();才能正常使用，并且这么强大的报表功能只能在线使用，允许用户每天访问5W次，想要离线使用的话只能用其他的报表框架了，后面的博客中我会介绍一个还算不错的js图形报表框架 google官方的详细api：
效果图1.
在页面中方法：
jQuery('#myTable1').gvChart({ chartType: 'AreaChart', gvSettings: { vAxis: { title: '金额' }, hAxis: { title: '月份' }, width: 720, height: 300 } }); 数据： | 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 实际完成 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
| 计划任务 | 1167 | 1110 | 691 | 165 | 135 | 157 | 139 | 136 | 938 | 1120 | 55 | 55 |
效果2：
调用方法：
jQuery('#myTable2').gvChart({ chartType: 'LineChart', gvSettings: { vAxis: { title: '金额' }, hAxis: { title: '月份' }, width: 720, height: 300 } }); 数据格式：
| 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 实际完成 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
| 计划任务 | 1167 | 1110 | 691 | 165 | 135 | 157 | 139 | 136 | 938 | 1120 | 55 | 55 |
效果3：
方法调用：
jQuery('#myTable3').gvChart({ chartType: 'BarChart', gvSettings: { vAxis: { title: '金额' }, hAxis: { title: '月份' }, width: 720, height: 300 }});数据格式：
| 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 实际完成 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
| 计划任务 | 1167 | 1110 | 691 | 165 | 135 | 157 | 139 | 136 | 938 | 1120 | 55 | 55 |
效果4：
方法调用：
jQuery('#myTable5').gvChart({ chartType: 'PieChart', gvSettings: { vAxis: { title: '金额' }, hAxis: { title: '月份' }, width: 720, height: 300 }}); 数据格式： | 一月 | 二月 | 三月 | 四月 | 五月 | 六月 | 七月 | 八月 | 九月 | 十月 | 十一月 | 十二月 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2001 | 900 | 600 | 327 | 359 | 376 | 398 | 60 | 50 | 404 | 700 | 200 | 500 |
区域报表
报表分析 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 实际完成 900 600 327 359 376 398 60 50 404 700 200 500 计划任务 1167 1110 691 165 135 157 139 136 938 1120 55 55 LineChart
报表分析 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 实际完成 900 600 327 359 376 398 60 50 404 700 200 500 计划任务 1167 1110 691 165 135 157 139 136 938 1120 55 55 BarChart
报表分析 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 实际完成 900 600 327 359 376 398 60 50 404 700 200 500 计划任务 1167 1110 691 165 135 157 139 136 938 1120 55 55 ColumnChart
报表分析 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 实际完成 900 600 327 359 376 398 60 50 404 700 200 500 计划任务 1167 1110 691 165 135 157 139 136 938 1120 55 55 PieChart
报表分析 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 2010 125 185 327 359 376 398 0 0 0 0 0 0
转载地址：http://pplpi.baihongyu.com/
你可能感兴趣的文章
C 语言-static和extern关键字2-对变量的作用
查看>>
【JavaScript 教程】浏览器—History 对象
查看>>
还不会正则表达式？看这篇！
查看>>
100道+ JavaScript 面试题，助你查漏补缺
查看>>
JavaScript深入理解之闭包
查看>>
这才是学习Vite2的正确姿势！
查看>>
7 个适用于所有前端开发人员的很棒API，你需要了解一下
查看>>
25个构建Web项目的HTML建议，你需要了解一下！
查看>>
【web素材】02-10款大气的购物商城网站模板
查看>>
6种方式实现JavaScript数组扁平化(flat)方法的总结
查看>>
如何实现a===1 && a===2 && a===3返回true？
查看>>
49个在工作中常用且容易遗忘的CSS样式清单整理
查看>>
20种在学习编程的同时也可以在线赚钱的方法
查看>>
隐藏搜索框：CSS 动画正反向序列
查看>>
12 个JavaScript 特性技巧你可能从未使用过
查看>>
127个超级实用的JavaScript 代码片段，你千万要收藏好（上）
查看>>
【视频教程】Javascript ES6 教程27—ES6 构建一个Promise
查看>>
【5分钟代码练习】01—导航栏鼠标悬停效果的实现
查看>>
127个超级实用的JavaScript 代码片段，你千万要收藏好（中）
查看>>
8种ES6中扩展运算符的用法
查看>>