在同一页面显示多个JavaScript统计图表
最近我接到一个开发任务,要求就“售后服务客户满意度调查问卷表”里客户填写的反馈答案做一个统计。
问题的例子如下:
- 您最后一次是何时购买了我们的产品?
- 服务人员服务态度是否友好、工作尽职尽责?
- 您对我公司提供的售后服务总体感觉如何?
。。。
我要实现的功能是出一个报表,在同一个页面显示对于每个问题,每个答案的总共出现次数。
我实现了一个简单的效果,如下图所示:
当然六个图标用的都是一模一样的测试数据,主要解决了多个图表出现在同一个页面里的布局问题。
大家用下面这个链接测试下效果。用Chrome开发者工具即可查看093_chart.html的实现。
http://i042416.github.io/FioriODataTestTool2014/WebContent/093_chart.html
手机上打开的效果。
简单过一下代码:
两个div里各包含了6个canvas。第一个div负责用6个饼状图来显示问题的结果,第二个div里的6个canvas则显示柱状图。每个canvas我用了标注成!important的display:inline属性,来强制让这些位于canvas节点里的统计图从左到右显示,而不是默认的每显示一个就换行。
function loaded(){
var totalWidth = getBodyNode().clientWidth;
console.log("width in load: " + totalWidth);
var aCharts = document.getElementsByTagName("canvas");
for( var i = 0; i < aCharts.length; i++){
aCharts[i].width = totalWidth / 6.5;
}
var option = {
type: "pie",
xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
yAxisData: [12, 19, 3, 5, 2, 3],
yAxisLabel: "Number of Votes"
};
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("myChart" + i, option);
}
option.type = "bar";
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("barChart" + i, option);
}
}
第41行把当前窗口总的宽度通过body节点的clientWidth属性来获得,然后除以6.5,商即为每个统计图的宽度。之所以除以6.5而不除以6是为了给每一行的统计图之间预留一些空隙。
统计图的类型,X和Y坐标的数据和标签通过option对象传入到函数createChartOnCanvas中。
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
在同一页面显示多个JavaScript统计图表的更多相关文章
- JS数组 编程练习 使用Javascript语言,把以下数组 在页面显示如下图所示的图案
编程练习 使用Javascript语言,把以下数组 var arr = ['*','##',"***","&&","****&quo ...
- 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...
- 页面显示(pageshow)和页面隐藏(pagehide)事件
Firefox和Opera有一个新特性,名叫“往返缓存”(back-forward cache,或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度.这个缓存中不仅保存 ...
- uploadify实现七牛云存储 显示上传进度+页面显示
准备: uploadify下载地址: http://www.uploadify.com/download/ 七牛 php-sdk开发指南: http://developer.qiniu.com/doc ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- JSP 页面显示sql中数据。el
存储数据库字段. package Bean; /** * Created by Administrator on 2017/5/24. */ public class info { private S ...
- 页面显示时间js
//页面显示时间 <span align="left" id="OperatorTime"> </span> <script> ...
- 不用EL表达式---实现product页面显示
产品页面显示 静态页面如下: <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- table形式的列表页面显示
(该案例在项目中的reserve_bchmc.html,其对应的后台在CountBean中) 先看一下效果图: 该列表页面并不是用easyUI中的datagrid实现的,而是用table实现页面显示的 ...
随机推荐
- if_test.py
strings=['xxaa','xuo','fwefxxx','woeuxxfei'] print(strings) #替换方法1 for string in strings: if 'xx' in ...
- 如何开始学习Go语言
除了Java.Python和JavaScript之外,如果要开始学习一门新语言的话,我想应该是Go! Go语言正在被越来越多的公司使用.我们公司的后端服务已经全面采用Go语言实现了. 最开始接触Go语 ...
- lua-resty-r3 高性能 OpenResty 路由实现
大家下午好!首先做下自我介绍,我于 2014 年加入奇虎 360,后与温铭结识,当时他正在基于 OpenResty 做天擎服务端,用于提供 API 服务.2015 年我们一起写了< OpenRe ...
- 探究final在java中的作用
目录 一. final修饰变量 1. 基础: final修饰基本数据类型变量和引用数据类型变量. 2. 进阶: 被final修饰的常量在编译阶段会被放入常量池中 3. 探索: 为什么局部/匿名内部类在 ...
- 自己动手搭建SSM
1.工具 apache-tomcat 7 apache-maven(后面详细讲!这东西我一开始也很懵逼) mysql 5以上的版本 navicat(有了这个就不用cmd了,可以直接显示数据库,如下图, ...
- c#删除指定文件夹中今天之前的文件
1.说明 使用Directory类对指定文件夹下的今天或者更早日期之前的文件进行删除.原文链接:http://www.cnblogs.com/lengzhan/p/6423943.html 2.代码 ...
- JDK由浅到深的理解
一.JDK的安装 二.JDK安装后目录下的文件夹的用处 bin:编译器(javac.exe); db:jdk从1.6之后内置Derby数据库,它是一个纯用Java实现的内存数据库,Apache的开源项 ...
- 鸟哥私房菜基础篇:Linux是什么习题
猫宁!!! 参考链接:http://cn.linux.vbird.org/linux_basic/0110whatislinux.php#ex 鸟哥是为中国信息技术发展做出巨大贡献的人. 1-你在你的 ...
- VS2019+ASP.NETCore+图表
原帖学习踩坑:https://www.cnblogs.com/fzqm-lwz/p/9704973.html,主要根据大佬原帖内容,实现尝试,进行一些修改: 实现方式一:通过标记帮助程序将JS代码传到 ...
- PHP 遍历一个文件夹下所有文件和子文件夹的方法
话不多说,直接上代码 <?php function my_dir($dir) { $files = []; if(@$handle = opendir($dir)) { while(($file ...