应用highcharts做直观数据统计

最近在看上了统计类的东东,发现以前端图表神器:highcharts

Highcharts是一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯Js图表库,Highcharts支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布图等多达20种图,其中很多图表可以集成在同一图形中形成综合图。

折线图:

上代码:

 1 $(function () {
 2     $(‘#container‘).highcharts({
 3         chart: {
 4             type: ‘line‘
 5         },
 6         title: {
 7             text: ‘Monthly Average Temperature‘
 8         },
 9         subtitle: {
10             text: ‘Source: WorldClimate.com‘
11         },
12         xAxis: {
13             categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
14         },
15         yAxis: {
16             title: {
17                 text: ‘Temperature (°C)‘
18             }
19         },
20         tooltip: {
21             enabled: false,
22             formatter: function() {
23                 return ‘<b>‘+ this.series.name +‘</b><br>‘+this.x +‘: ‘+ this.y +‘°C‘;
24             }
25         },
26         plotOptions: {
27             line: {
28                 dataLabels: {
29                     enabled: true
30                 },
31                 enableMouseTracking: false
32             }
33         },
34         series: [{
35             name: ‘Tokyo‘,
36             data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
37         }, {
38             name: ‘London‘,
39             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
40         }]
41     });
42 });

码农都是有尊严的

转载请注明来源,谢谢

http://www.cnblogs.com/benpao/

时间: 2024-10-05 15:31:08

应用highcharts做直观数据统计的相关文章

美图数据统计分析平台架构演进 当时我一个人,一天能够做四五个统计需求,而抽象后一天从了解需求开始到实现大概能做七八个统计需求,整体效率有不错的提升。

小结: 1. 一个有追求的程序员的话,可能不会甘于每天做重复的工作.因为在平时接触业务与实现过程中,深有体会统计业务逻辑的流程基本上是一致的,所以考虑抽象出这样一个相对通用的业务处理的流程,基本的流程是从数据源Query出数据,然后做一些业务方面的聚合或者过滤,最终把数据存储到DB.那在代码实现层面做了一层抽象,抽象一个统计的组件,包含Query.Aggregator以及DBStore,然后分别有一些不同Query和Store场景的实现.当做了一层这样的抽象以后,相比于前面的方案,生产力还是得到

Asp.net管理信息系统中数据统计功能的实现

数据统计是每个系统中必备的功能,在给领导汇报统计数据,工作中需要的进展数据时非常有用. 在我看来,一个统计的模块应该实现以下功能: 能够将常用的查询的统计结果显示出来: 显示的结果可以是表格形式,也可以是图形形式,如果是图形的话能够以多种形式显示(柱状图.折线图.饼图.雷达图.堆叠柱状图等): 统计查询的结果,点击数字或者百分比能够显示详细的数据: 能够自由组合查询条件.筛选条件.分组条件.排序等: 统计结果最好有个实时预览: 查询统计能够保存,以便下次能直接调用并显示统计查询的结果: 对于保存

个推数据统计产品(个数)iOS集成实践

最近业务方给我们部门提了新的需求,希望能一站式统计APP的几项重要数据.这次我们尝试使用的是个推(之前专门做消息推送的)旗下新推出的产品"个数·应用统计",根据官方的说法,个推的数据统计产品通过专业的移动应用数据分析,可以为用户的应用提供实时数据统计分析服务,包括了解版本质量.渠道状况.用户画像等.数据最后以可视化形式展现,很直观.我们尝试了一段时间,发现效果还是很不错的,这篇文章将为大家介绍如何从零开始快速高效地集成个数iOS SDK. 一.登录账号并创建应用获取 APP ID 1.

锤死虚假流量,还得从数据统计开始!

前段时间,一篇控诉微博大V虚假流量的公众号文章,刷爆了互联网人的朋友圈,在文中,作者说她选择了微博领域流量的头部机构进行广告投放,这个机构手持多个微博大号,一条微博投放的价格就有几十万,当事人提出先选择一个拥有380万粉丝博主,发布内含广告内容的原创VLOG视频,测试一下看看效果怎么样.而满怀等待的看着微博发出后,但是却惊诧愤怒地发现,视频的浏览量为353万,但是他们店铺的流量和成交数几乎为0! 沟通过后,对方推诿,于是就写文开骂,作者文中最后说因为合同问题,告不了对方,但是也要曝光出上一口气.

在Sqlserver下巧用行列转换日期的数据统计

在Sqlserver下巧用行列转换日期的数据统计 前言 在SQLSERVER 中有很多统计函数的基础语法,有使用Group By 或 partition by 后配合Sum,Count(*) 等用法.常应用于统计网站的PV流量.合同项目中月收入等业务场景中.在文中我分享下最近做过的统计小案例,和大家互相学习下:) 背景 合同中行项目按月收入的统计 1.业务逻辑及需求  1.1 表业务逻辑 合同是公司间互相签署的法律契约,一份合同从诞生起,就开始流转于公司的各个部门,最核心的还是盈亏的数值.盈亏是

1.大数据统计(原创)

大数据统计 1.项目需求,统计海量数据中某一参数的概率分布 2.实现过程 #!/usr/bin env python # -*- coding:utf-8 -*- import re def preprocess(fileName, pattern): ''' 将数据集进行预处理,比如取出RSSI那一列的数据 :param fileName: 接收相对路径 :param pattern: 接收正则表达式的模板 :return: 返回Region of interest数据集 ''' with o

highcharts基本配置和使用highcharts做手机端图标

使用highcharts三个理由:1>手机适配2>大数据的支持3>svg的优势缺点:不开源.学习资料少 官方有基本的常规用法,一般都是基于jquery写的例子,也可以自己封装函数,用原生来调取,性能简单测试一下,没发现两者有什么大的区别. heightcharts.js是一些简单图表的框架js,但是要做动态实时数据图 <script src="js/jquery-1.7.2.js"></script>   <script src=&quo

Hbase在数据统计中的应用心得

1. 数据统计的需求 互联网上对于数据的统计,一个重要的应用就是对网站站点数据的统计,例如CNZZ站长统计.百度统计.Google Analytics.量子恒道统计等等. 网站站点统计工具无外乎有以下一些功能: 1)网站流量统计:包括PV.UV.IP等指标,这些统计指标可以以趋势图的形式展示出来,如最近一周.最近一个月等. 2)IP来源信息统计:记录各个来源IP下的访问PV数. 3)访问来源分析:记录访客是从哪些途径到达本网站的. 4)搜索引擎及搜索关键词分析:对于各个指定搜索引擎带来访问PV的

【转载】国内网站博客数据统计选免费Google Analytics还是百度统计

[转载]国内网站博客数据统计选免费Google Analytics还是百度统计 Google Analytics谷歌统计是我用的第一个网站统计工具,当然现在也一直在用.Google Analytics凭借其强大的功能和超强的稳定性.快速的反应能力.广泛的数据应用功能,受到了广大站长的追捧. 使用Google Analytics的站长们应该不在少数吧,每天登录Google Analytics免费网站上查看网站的流量也是我们这些站长们必须做的事情,认真分析Google Analytics当中的数据信