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

olle 发布于2019-08-23 12:33 / 1790人阅读

摘要：我要实现的功能是出一个报表，在同一个页面显示对于每个问题，每个答案的总共出现次数。第一个负责用个饼状图来显示问题的结果，第二个里的个则显示柱状图。之所以除以而不除以是为了给每一行的统计图之间预留一些空隙。

最近我接到一个开发任务，要求就“售后服务客户满意度调查问卷表”里客户填写的反馈答案做一个统计。

问题的例子如下：

您最后一次是何时购买了我们的产品？

服务人员服务态度是否友好、工作尽职尽责？

您对我公司提供的售后服务总体感觉如何？

。。。

我要实现的功能是出一个报表，在同一个页面显示对于每个问题，每个答案的总共出现次数。

我实现了一个简单的效果，如下图所示：

当然六个图标用的都是一模一样的测试数据，主要解决了多个图表出现在同一个页面里的布局问题。

大家用下面这个链接测试下效果。用Chrome开发者工具即可查看093_chart.html的实现。

http://i042416.github.io/Fior...

手机上打开的效果。

简单过一下代码：

两个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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

混合云 idc机房托管 js的值显示在页面上多个域名同一网站多个域名同一网站备案多个图表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98729.html

分享一个开源的JavaScript统计图表库，40行代码实现专业统计图表

摘要：柱状图，饼状图，点状图等等您能想到的类型全部支持。这个开源库的官网直接看如何只用行代码就实现专业的统计图表。第八行声明要显示的统计图的类型。如果是线状图，柱状图这些类型，则定义的维度作为统计图的纵坐标也就是坐标。提升程序员工作效率的工具/技巧推荐系列推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer...

Magicer 2019-08-23 12:33 评论0 收藏0
常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
New Relic性能监控（三）浏览器端监控

摘要：性能概览下图为一个监控的的性能概览页面该页面主要包含下面几个部分的内容页面加载时间曲线得分图各浏览器的吞吐量会话追踪，错误，以及响应时间。吞吐量吞吐量是按浏览器的类型绘制的，单位是每分钟浏览量。 New Relic性能监控（三）浏览器端监控 2018-05-02 琅琊书生本系列文章基于公司使用New Relic的经验，鉴于国内较少有这方面的文章，因此把我工作中了解到的知识分享给大家，希...

Codeing_ls 2019-08-26 11:53 评论0 收藏0
New Relic性能监控（三）浏览器端监控

摘要：性能概览下图为一个监控的的性能概览页面该页面主要包含下面几个部分的内容页面加载时间曲线得分图各浏览器的吞吐量会话追踪，错误，以及响应时间。吞吐量吞吐量是按浏览器的类型绘制的，单位是每分钟浏览量。 New Relic性能监控（三）浏览器端监控 2018-05-02 琅琊书生本系列文章基于公司使用New Relic的经验，鉴于国内较少有这方面的文章，因此把我工作中了解到的知识分享给大家，希...

banana_pi 2019-08-15 15:48 评论0 收藏0
New Relic性能监控（三）浏览器端监控

摘要：性能概览下图为一个监控的的性能概览页面该页面主要包含下面几个部分的内容页面加载时间曲线得分图各浏览器的吞吐量会话追踪，错误，以及响应时间。吞吐量吞吐量是按浏览器的类型绘制的，单位是每分钟浏览量。 New Relic性能监控（三）浏览器端监控 2018-05-02 琅琊书生本系列文章基于公司使用New Relic的经验，鉴于国内较少有这方面的文章，因此把我工作中了解到的知识分享给大家，希...

yanest 2019-08-02 10:21 评论0 收藏0