Highcharts 非常实用的Javascript统计图

最新推荐文章于 2021-01-14 09:33:09 发布
最新推荐文章于 2021-01-14 09:33:09 发布
阅读量3.3k 收藏
点赞数
分类专栏： Html+CSS jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine_bean/article/details/9232039
版权
javascript 同时被 3 个专栏收录
28 篇文章 0 订阅
订阅专栏
jquery
25 篇文章 0 订阅
订阅专栏
Html+CSS
22 篇文章 0 订阅
订阅专栏
Highcharts 官网： http://www.highcharts.com

Highcharts 官网示例：http://www.highcharts.com/demo/

Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

官网实例中给出了各式各样的demo，可以参照document修改自己需要的即可。

下面是一个学生成绩走势demo：


<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
	$(function () {
        $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '初三第一学期'
            },
            xAxis: {
				
                type: 'datetime',
				labels: {
					formatter: function() {
                        return  Highcharts.dateFormat('%Y-%m-%d', this.value);
					}
                }
            },
            yAxis: {
                title: {
                    text: '分数'
                },
                min: 0
            },
            tooltip: {
				//这种模式下，每点的tooltip单独显示
				shared: false,
                formatter: function() {
						var s = '<b>'+ this.point.name +'</b>'+'<br/>'+  Highcharts.dateFormat("%Y/%m/%d", this.point.x) +': '+this.point.y +'分<br/>';
						return s;
                }
				/**
				这种模式下，两个点的tooltip显示在一起
				shared: true,
				formatter: function() {
						 var s='';
						 $.each(this.points, function(i, point) {
							s += '<b>'+ point.key +'</b>'+'<br/>'+  Highcharts.dateFormat("%Y/%m/%d", point.x) +': '+point.y +'分<br/>';
						});
						return s;
                }
				*/
            },
            series: [{
                name: '英语',
                // Define the data points. All series have a dummy year
                // of 1970/71 in order to be compared on the same x axis. Note
                // that in JavaScript, months start at 0 for January, 1 for February etc.
				
                data: [
                    {x:Date.UTC(1970,  9, 27), y:55, name:'高一第一学期第一次考试'},
                    {x:Date.UTC(1970, 10, 10), y:60, name:'高一第一学期第二次考试'},
                    {x:Date.UTC(1970, 10, 18), y:70, name:'高一第一学期第三次考试'},
                    {x:Date.UTC(1970, 11,  2), y:80, name:'高一第一学期第四次考试'},
                    {x:Date.UTC(1970, 11,  9), y:60, name:'高一第一学期第五次考试'},
                    {x:Date.UTC(1970, 11, 16), y:60, name:'高一第一学期第六次考试'},
                    {x:Date.UTC(1970, 11, 28), y:67, name:'高一第一学期第七次考试'},
                    {x:Date.UTC(1971,  0,  1), y:81, name:'高一第一学期第八次考试'},
                    {x:Date.UTC(1971,  0,  8), y:78, name:'高一第一学期第九次考试'},
                    {x:Date.UTC(1971,  0, 12), y:98, name:'高一第一学期第十次考试'},
                    {x:Date.UTC(1971,  0, 27), y:84, name:'高一第一学期第十一次考试'},
                    {x:Date.UTC(1971,  1, 10), y:80, name:'高一第一学期第十二次考试'},
                    {x:Date.UTC(1971,  1, 18), y:80, name:'高一第一学期第十三次考试'},
                    {x:Date.UTC(1971,  1, 24), y:92, name:'高一第一学期第十四次考试'},
                    {x:Date.UTC(1971,  2,  4), y:49, name:'高一第一学期第十五次考试'},
                    {x:Date.UTC(1971,  2, 11), y:79, name:'高一第一学期第十六次考试'},
                    {x:Date.UTC(1971,  2, 15), y:73, name:'高一第一学期第十七次考试'},
                    {x:Date.UTC(1971,  2, 25), y:61, name:'高一第一学期第十八次考试'},
                    {x:Date.UTC(1971,  3,  2), y:76, name:'高一第一学期第19次考试'},
                    {x:Date.UTC(1971,  3,  6), y:82, name:'高一第一学期第20次考试'},
                    {x:Date.UTC(1971,  3, 13), y:84, name:'高一第一学期第21次考试'},
                    {x:Date.UTC(1971,  4,  3), y:10, name:'高一第一学期第22次考试'},
                    {x:Date.UTC(1971,  4, 26), y:19, name:'高一第一学期第23次考试'},
                    {x:Date.UTC(1971,  5,  9), y:25, name:'高一第一学期第24次考试'},
                    {x:Date.UTC(1971,  5, 12), y:55, name:'高一第一学期第25次考试'}
                ]
				//,type:'column'
            }, {
                name: '数学',
                data: [
                    {'x':Date.UTC(1970,  9, 18), 'y':45, 'name':'高一第一学期第1次考试'},
                    {x:Date.UTC(1970,  9, 27), y:29, name:'高一第一学期第2次考试'},
                    {x:Date.UTC(1970, 11,  1), y:47, name:'高一第一学期第3次考试'},
                    {x:Date.UTC(1970, 11, 11), y:55, name:'高一第一学期第4次考试'},
                    {x:Date.UTC(1970, 11, 25), y:38, name:'高一第一学期第5次考试'},
                    {x:Date.UTC(1971,  0,  8), y:38, name:'高一第一学期第6次考试'},
                    {x:Date.UTC(1971,  0, 15), y:38, name:'高一第一学期第7次考试'},
                    {x:Date.UTC(1971,  1,  1), y:38, name:'高一第一学期第8次考试'},
                    {x:Date.UTC(1971,  1,  8), y:48, name:'高一第一学期第9次考试'},
                    {x:Date.UTC(1971,  1, 21), y:58 ,name:'高一第一学期第10次考试'},
                    {x:Date.UTC(1971,  2, 12), y:89, name:'高一第一学期第11次考试'},
                    {x:Date.UTC(1971,  2, 25), y:70, name:'高一第一学期第12次考试'},
                    {x:Date.UTC(1971,  3,  4), y:94, name:'高一第一学期第13次考试'},
                    {x:Date.UTC(1971,  3,  9), y:91, name:'高一第一学期第14次考试'},
                    {x:Date.UTC(1971,  3, 13), y:75, name:'高一第一学期第15次考试'},
                    {x:Date.UTC(1971,  3, 19), y:66 ,name:'高一第一学期第16次考试'},
                    {x:Date.UTC(1971,  4, 25), y:65 ,name:'高一第一学期第17次考试'},
                    {x:Date.UTC(1971,  4, 31), y:35, name:'高一第一学期第18次考试'},
                    {x:Date.UTC(1971,  5,  7), y:56, name:'高一第一学期第19次考试'} 
                ]
            }, {
                name: '语文',
                data: [
                    {x:Date.UTC(1970,  9,  9), y: 0, name:'高一第一学期第1次考试'},
                    {x:Date.UTC(1970,  9, 14), y:15, name:'高一第一学期第2次考试'},
                    {x:Date.UTC(1970, 10, 28), y:35, name:'高一第一学期第3次考试'},
                    {x:Date.UTC(1970, 11, 12), y:46, name:'高一第一学期第4次考试'},
                    {x:Date.UTC(1971,  0,  1), y:59, name:'高一第一学期第5次考试'},
                    {x:Date.UTC(1971,  0, 24), y:58, name:'高一第一学期第6次考试'},
                    {x:Date.UTC(1971,  1,  1), y:62, name:'高一第一学期第7次考试'},
                    {x:Date.UTC(1971,  1,  7), y:65, name:'高一第一学期第8次考试'},
                    {x:Date.UTC(1971,  1, 23), y:77, name:'高一第一学期第9次考试'},
                    {x:Date.UTC(1971,  2,  8), y:77, name:'高一第一学期第10次考试'},
                    {x:Date.UTC(1971,  2, 14), y:79, name:'高一第一学期第11次考试'},
                    {x:Date.UTC(1971,  2, 24), y:86, name:'高一第一学期第12次考试'},
                    {x:Date.UTC(1971,  3,  4), y:80, name:'高一第一学期第13次考试'},
                    {x:Date.UTC(1971,  3, 18), y:94, name:'高一第一学期第14次考试'},
                    {x:Date.UTC(1971,  3, 24), y:98, name:'高一第一学期第15次考试'},
                    {x:Date.UTC(1971,  4, 16), y:39, name:'高一第一学期第16次考试'},
                    {x:Date.UTC(1971,  4, 21), y: 0, name:'高一第一学期第18次考试'},
                ]
            }]
        });
    });
    

		</script>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

	<div id="container" style="max-width: 800px; height: 400px; margin: 0 auto"></div>

	</body>
</html>


sunny-sky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯Javascript的统计图形报表，带实例和详细的说明文档 Highcharts
04-19
Highcharts中文帮助文档（带例子） Chart 图标区选项 Chart图表区选项用于设置图表区相关属性。 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 renderTo 图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值 null defaultSeriesType 默认图表类型line, spline, area, areaspline, column, bar, pie , scatter 0 width 图表宽度，默认根据图表容器自适应宽度 null height 图表高度，默认根据图表容器自适应高度 null margin 设置图表与其他元素之间的间距，数组，如[0,0,0,0] [null] plotBackgroundColor 主图表区背景色，即X轴与Y轴围成的区域的背景色 null plotBorderColor 主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色 null plotBorderWidth 主图表区边框的宽度 0 shadow 是否设置阴影，需要设置背景色backgroundColor。 false reflow 是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小。 true zoomType 拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：'x','y','xy' '' events 事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数。 Color 颜色选项 Color颜色选项用于设置图表的颜色方案。 参数 描述 默认值 color 用于展示图表，折线/柱状/饼状等图的颜色，数组形式。 array Highcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：
使用highcharts生成统计图
技术成就梦想
09-04 3425
关于怎么使用highcharts的文章网络上并不多见，所以呢花了点时间学了下，现在就给大家分享下我的经验。 1.开发准备 highcharts的js开发包，json开发包，jquery开发包 这里着重使用json，这是我观察demo例子发现的，至于怎么从后台拿到json就要使用jquery的ajax请求和后台交互。 2.使用servlet取得相关数据并拼接json字符串 package
jquery图表统计插件-highcharts详解
weixin_33697898的博客
04-21 111
代码实例： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&g..
基于ssh框架的highcharts前后台数据交互实例
weixin_30340617的博客
03-13 81
　　Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 　　官网：http://www.highcharts.com/，官网上的数据都是写死的，作为一名菜鸟，搞了很久才知道...
highcharts示例，各种统计表例子
07-27
各种统计图表示例，源码都在里面。效果和flax差不多
Highcharts 非常实用的Javascript统计图demo示例
10-27
官网实例中给出了各式各样的demo，可以参照document修改自己需要的即可，本文实现的是一个学生成绩走势demo，有需求的朋友可以参考下哈，希望对大家有所帮助
highcharts好用的前端统计js
07-23
Highcharts还支持动态更新数据，可以通过调用`series.addPoint()`或`chart.update()`方法来实现图表数据的实时变化，这对于监控类应用非常实用。此外，Highcharts还提供了触摸事件和响应式设计的支持，确保在移动...
JavaScript内存统计专题图示例
12-14
JavaScript内存统计专题图是一种在Web应用中用于可视化和分析数据集的方法，特别是在GIS（地理信息系统）领域中，SuperMap iClient JavaScript提供了强大的支持。本文将深入探讨如何利用JavaScript实现内存中的统计...
Highcharts+PHP+Mysql生成饼状统计图
09-04
通过以上步骤，我们可以利用Highcharts、PHP和MySQL创建一个动态的饼状统计图，实时反映数据库中的数据变化，这对于网站数据分析和报告展示非常有帮助。同时，这个过程也展示了Web开发中前后端协作的一个典型实例。
Highcharts图形统计
07-28
Highcharts是一款强大的JavaScript图表库，用于在Web上创建高质量、互动的数据可视化图形。它支持多种图表类型，包括折线图、柱状图、饼图、散点图等，广泛应用于数据分析和报告展示。本篇文章将深入探讨如何利用...
自创的基于JQUERY的PieChart统计用饼图
10-20
本功能类是建立在JQUERY1.3.2的基础之上 //feature: //1.饼图的标题，各种数据的颜色、名称及数量均可自定义，总数量将交由控件自动算出 //2.饼图的圆心所在CANVAS中的位置，饼图的半径，每个色区中显示数值的类型都可自定义 //3.饼图的CANVAS，颜色说明在relative定位模式的content内容框中均为absolute定位模式，用户可根据需要自行定义它们的长宽，上边距和左边距，以及排列方式 //4.可动态用AJAX方式远程载入要显示的一组数据。 //5.本品不含任何图片. //6.经测试，兼容IE6--IE8，Firefox,chrome浏览器，在非IE浏览器下更加美观:)。
highcharts key point
woyaoxiazaianimei的博客
01-14 339
  highcharts中文教程http://www.hcharts.cn/docs/index.php?doc=basic-chart事件（在chart这个object里设置）例子1（click）: // create the chart $('#container').highcharts({ chart: { events...
Highcharts插件常用配置
nann-viiv 的博客
01-14 841
拿柱状图来做例子： 引入js "/assets/module/Highcharts-8.1.2/code/highcharts.js" "/assets/module/Highcharts-8.1.2/code/modules/oldie.js" "/assets/module/Highcharts-8.1.2/code/modules/exporting.js" <div id="container"></div> 配置js var chart = Highcharts
js转换Date日期格式
热门推荐
不忘初心的博客
01-14 18万+
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1; myDate.getDate()
项目经验：Highcharts绘制饼图、折线图、柱状图
luoenjun90的专栏
07-29 1367
需要引入highcharts.js javascript/highChars/highcharts.js" type="text/javascript">   bbin
在同一页面显示多个JavaScript统计图表
weixin_33762130的博客
09-09 366
最近我接到一个开发任务，要求就“售后服务客户满意度调查问卷表”里客户填写的反馈答案做一个统计。 问题的例子如下： 您最后一次是何时购买了我们的产品？ 服务人员服务态度是否友好、工作尽职尽责？ 您对我公司提供的售后服务总体感觉如何？ 。。。 我要实现的功能是出一个报表，在同一个页面显示对于每个问题，每个答案的总共出现次数。 我实现了一个简单的效果，如...
Highchartsjs前后台交互的简单案例
学习者的博客
05-05 3007
首先需要导入&lt;script type="text/javascript" src="../../js/jquery-2.1.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../../theme/assets/global/plugins/highcharts/js/highcharts.js"&
小白看过来!有关于highcharts 数据格式 以及案例 下钻
qq_41407619的博客
10-22 1209
小白看过来!有关于highcharts 数据格式 以及案例 下钻 博主新手 最近做了一个highcharts下钻的报表 要求是一级下转 刚开始是导入highcharts常用的几个包highcharts.js，highcharts-zh_CN.js，exporting.js ,drilldown.js(这个是必须导入的 实现下钻的依赖包) 刚刚入手看了官方文档 当时只有各种...
ExtJs pie chart 动态数据统计
The Best or Nothing!
03-22 172
pie_chart.js [code="java"] // 必需,ExtJs图标是基于Flash的 Ext.chart.Chart.CHART_URL = 'lib/ext-3.3.1/resources/charts.swf'; Ext.onReady(function(){ var store = new Ext.data.JsonStore({ fie...
javascript折线统计图
最新发布
06-08
JavaScript可以使用许多流行的JavaScript库和框架来创建折线统计图，如Highcharts、Chart.js、D3.js等。 以下是使用Highcharts创建折线图的一个简单示例： ```html <!DOCTYPE html> 折线统计图 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值