在同一页面显示多个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 ...
javascript 在页面显示xxxx年xx月xx日
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8 ...
fusioncharts同一页面显示2个仪表盘，且以java字符串作为xml数据
为什么80%的码农都做不了架构师?>>> fusioncharts同一页面显示2个仪表盘,且以java字符串作为xml数据 <%@ page contentType=&q ...
从输入URL到页面显示的过程
http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ http://www.cnblogs.com/wena ...
js创建10万行表格页面显示10万行数据
js创建10万行表格页面显示10万行数据 <html> <head></head> <style> table { border-collap ...
java页面分页显示代码_通用分页jsp页面显示
注:本章内容都是在上一篇文章通用分页后台显示:https://www.cnblogs.com/ly-0919/p/11058942.html 的基础上进行改进,所以有许多的类都在上一篇, 带来不便 ...
SSM上传用户头像。解决HTTP 400,保存到本地以及数据库保存路径，在页面显示的问题
第一次用SSM上传用户图片,遇到很多问题,这里逐一记录: 1.保存到本地某个文件夹 2.在页面显示图片 3.报错HTTP 400 bad request 用maven搭建的项目,结构如图: 主要是实体 ...
html css学习笔记~ 基础知识和页面显示的四个区域内容及display:flex 等常用的一些命令（手画）
一般在html文件中输入<link href=".../xxx.css" rel="stylesheet"/> 通过这样的外部样式联系 css & ...
360浏览器兼容问题html,该页面显示了360浏览器中的异常兼容性问题
简介: 在Web应用程序的开发过程中,发现某些页面无法在360浏览器上正确显示,但是在其他浏览器上360浏览器页面显示不全,它们都处于正常状态. 有什么问题吗? 询问: 网页在360浏览器上显示不正确 ...

在同一页面显示多个JavaScript统计图表

在同一页面显示多个JavaScript统计图表相关推荐

最新文章

热门文章