好久没发表过什么东西了，今天下午闲的实在是蛋疼，没事做！！！所以才想起来，跟大家分享下。
由于自己是实习生，有好多的东西都不懂，进公司也不久，就在最近遇到统计图，可能到同事们写的代码很少很少，但是我就是看不懂是怎么搞定的，今天终于在网上查到答案，并消化的差不多了！！！下面我给大家分享下统计图源码（里面的数据都是死数据）：希望能给向我一样的菜鸟一点帮助
<HTML>
<HEAD>
<!-- 1.引入jquery库 -->
<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<!-- 2.引入highcharts的核心文件 -->
<script type="text/javascript" src="javascript/highcharts.js"></script>
<!-- 3.引入导出需要的js库文件 -->
<script type="text/javascript" src="javascript/exporting.js"></script>
<script type="text/javascript">
<script type="text/javascript">
Highcharts.setOptions({
colors: ['#D9A63D', '#6ACD4C', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',//"rederTo"图表的页面显示容器container
defaultSeriesType: 'column',//图表类别（类型），可取值有：line、spline、area、areaspline、bar、column,pie,scatter等
marginRight: 130,//上下左右空隙
marginBottom: 25//上下左右空隙
},
title : {
text : '全国各大城市季节情况',//”text“坐标名称
x : -20
//center
},
subtitle : {
text : '主要城市温度比较',
x : -20
},
xAxis : {
categories : [ '一月', '二月', '三月', '四月',
'五月', '六月', '七月', '八月', '九月',
'十月', '十一月', '十二月' ]
},
yAxis : {
title : {
text : '温度 (°C)'
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip : {
formatter : function() {
return this.series.name+this.x+':'+this.y+'°C';
}
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
series : [
{
name : '北京',
data : [ 7.0, 6.9, 9.5, 14.5, 18.2,
21.5, 24.8, 26.5, 23.3, 18.3,
13.9, 9.6 ]
},
{
name : '上海',
data : [ -0.2, 0.8, 5.7, 11.3, 17.0,
22.0, 24.8, 24.1, 20.1, 14.1,
8.6, 2.5 ]
},
{
name : '南昌',
data : [ -0.9, 0.6, 3.5, 8.4, 13.5,
17.0, 18.6, 17.9, 14.3, 9.0,
3.9, 1.0 ]
},
{
name : '长沙',
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 ]
}]
});
});
</script>
</head>
<body>
<!--5.导入容器用于显示图表-->
<div id="container"
style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
分享到：
相关推荐
本资源包含多款基于Flash的统计图动画，包括柱形图、圆饼图和折线图，这些都是数据分析和展示中常见的图表类型。以下是这些图表的相关知识点： 1. Flash统计图：Flash是一种交互式矢量图形和多媒体平台，它允许开发...
"html5+css3的条形统计图和折线统计图源码"是一个利用现代Web技术实现的数据可视化项目，它结合了HTML5、CSS3、jQuery和Ajax等多种关键技术，为开发者提供了一个灵活且互动的图表展示方案。 首先，HTML5是现代网页...
本文将深入探讨“直线统计图”和“弧线统计图”的实现，这两种图表在数据分析和展示中经常被使用。本资源提供的是使用Android Studio开发的代码示例，适用于那些希望在Android应用中集成这些图形功能的开发者。 ...
《单式折线统计图》是五年级数学下册的一个重要知识点，主要涉及统计图表的类型、特点和绘制方法。本节课的教学目标包括三个方面： 1. 学生需要理解单式折线统计图的基本概念，知道它是如何表示数据及其变化的。在...
下面将详细阐述这三种统计图及其在数据统计中的应用。 1. 直方图： 直方图是一种用于表示连续性数值数据分布的图形，通过将数据区间划分为若干等宽的“柱子”来显示每个区间内的频数或频率。在描述中提到的场景中，...
Android环形统计图 既能展示百分比，又能展示描述文字，且从环上拉出一条线出去进行展示，并且有颜色区分； int[] data = {100,20,9,71}; String[] text = {"红色","黄色","蓝色","绿色"}; String[] colors = {"#ff...
在Word文档中生成统计图是一项常见的需求，尤其在数据分析和报告制作时。本篇文章将深入探讨两种方法，教你如何利用FreeMarker来实现这一功能。 ### 一、生成图片在客户端放入Word文档 1. **生成统计图**: 首先，...
扇形统计图是一种数据可视化工具，它通过将圆分成多个扇形来表示部分与整体之间的比例关系。在教育领域，尤其是数学课程中，扇形统计图是数据分析的基础内容，帮助学生理解不同类别在整体中的相对大小。从提供的文档...
扇形统计图是小学阶段统计图认识的一部分，除了扇形统计图，小学阶段还需要认识条形统计图和折线统计图。扇形统计图在日常生活中的应用非常广泛，因此被《标准》安排为必学内容。本单元是在学习了条形统计图和折线...
【描述】：“这是一款适用于初学者学习的折线统计图” 对于初学者来说，理解并应用HTML和CSS来构建折线图可能有些挑战，但这个实例提供了一个良好的起点。它简化了过程，使学习者能够直观地看到代码与实际图形之间...
statistics、数据、条形统计图、复式条形统计图、单式条形统计图、统计表、人口统计、城镇人口、乡村人口、人口数量、变化趋势、数据分析、数据可视化、图例、数学问题、数据解读 本资源是关于四年级数学下册的教学...
"Bootstrap统计图后台管理模板"是基于Bootstrap框架构建的，专为后台管理系统设计，特别关注数据可视化和销售统计。这种模板能够帮助开发者快速搭建具有现代感、用户友好的管理界面，用于展示各类统计数据，例如销售...
【条形统计图与折线统计图】是数据可视化的重要工具，它们在数据分析和信息传达中扮演着关键角色。条形统计图通过矩形的长度或高度来展示各类别的数量或频率，便于比较不同类别的数据。折线统计图则通过连接数据点...
在Android Studio中开发一款应用，实现统计图生成是常见的需求，尤其对于数据分析或者展示来说尤为重要。本项目专注于四种类型的图表：柱状图、折线图、饼图以及折线柱状结合图，这些图表能够直观地展示数据变化趋势...
4. **比较条形统计图与折线统计图**：条形统计图侧重于比较不同类别的数据量，而折线统计图则更专注于显示数据随时间的动态变化。两者各有优势，适用于不同的数据呈现需求。 5. **复式折线统计图**：当需要比较两个...
C# 绘制常用统计图（柱状图、折线图、扇形图）的方法和源码 本文将详细介绍如何使用 C# 语言绘制常用统计图，包括柱状图、折线图和扇形图。这些图形都是动态生成的，数据来自 Sql Server 2000 数据库。 一、柱状图...
在Asp.net中绘制折线统计图是一种常见的需求，尤其在数据分析、监控或者报表展示的场景下。本项目采用C#作为后端编程语言，并利用SQL Server 2000作为数据库存储，来实现从数据库中提取数据并动态生成折线图的功能。...
折线统计图作为数据可视化工具的一种，能够清晰地展示数据的变化趋势，广泛应用于金融、科研、工程等多个领域。本项目着重介绍了一个基于SurfaceView开发的可左右拖动并支持快速滑动的折线统计图组件。 首先，我们...
最后一部分强调了统计图的完整性和准确性，需要学生根据数据填充纵轴，确保统计图的完整，并根据日期推断统计图所反映的时间段。 通过这份测试卷，学生将学习到如何读取和理解条形统计图，进行数据分析，以及如何...
在C#编程中，绘制统计图是一项常见的任务，特别是在数据可视化和分析中。这个示例是专门为初学者设计的，旨在帮助他们理解如何利用C#语言来创建自己的统计图形。以下是一些关于C#绘制统计图的关键知识点： 1. **GDI...