HighCharts基本使用实例(入门)
HighCharts
摘要
HighCharts是眼下最为流行的图表插件,应用范围广泛,眼下支持曲线图、区域图、3D图、柱状图、饼图、散列图、混合图等，而且还支持一些拓展的特殊图表，如：仪表图、极地图、箱线图、瀑布图等。因工作中用到，所以在这里我仅仅做最主要的配置使用。
官方站点:www.highcharts.com,有兴趣的同学也能够去上面学习很多其它的内容。
使用
首先须要到下载安装包 - highcharts下载
解压，然后导入两个js文件，然后写代码。举个官网上最简单的样例：
<!doctype html><head>
<meta charset="utf-8" />
<script src="文件所在路径/jquery-1.8.3.js"></script>
<script src="文件所在路径/highcharts.js"></script>
<script>
$(function () {
$('#chart').highcharts({
title: {
text: 'xxx图表'//指定图表标题
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], //指定x轴标签
labels : //定义x轴标签的样式
{
rotation : -80 ,
fontStyle : 'italic',
style: {
fontSize:'',
fontFamily: '微软雅黑'
}
}
},
yAxis: {
title: {
text: 'Temperature (°C)' //指定y轴标题
}
},
tooltip: {
valueSuffix: '°C' //指定鼠标移动到某个点上的提示框单位
},
legend: { //
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '温度',
type:'column', //指定图表类型 为柱状图，默觉得折线图。
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] //y轴数据
}]
});
});
</script></head><body>
<div id="chart" style="min-width:700px;height:400px"></div></body></html>直接将以上代码粘贴到文件里，改动一下js路径，执行就能够。
还能够支持动态拓展，比方：动态添加y轴，动态改动标题等等。
//获取highcharts对象
chart = $('#chart').highcharts();
//
chart.addAxis({
id: 'precipitation',
title: {
text: '降雨量'
},
lineWidth: 2,
lineColor: '#08F',
labels: {
format: '{value} mm',
style: {
color: '#08F'
}
},
opposite: true //在右边轴显示 ， 用于须要两边轴都须要显示的情况。
});
chart.addSeries({
name: '降雨量',
type: 'column',
color: '#08F',
yAxis: 'precipitation',
data: precipitationDatas,
tooltip: {
valueSuffix: 'mm'
}
});
//动态删除y轴。
chart.get("precipitation").remove();
这个就是执行起来的图。
OK， 就到这里。
HighCharts基本使用实例(入门)的更多相关文章
- XML实例入门2
工具:notepad++.VS2008(MSXML6.0) 来自msdn的例子(经过修改,因为升级到MSXML6.0,有些关键字不太一样了), 需要文件books.xml,books.vsd(博客只支 ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：1. 自定义窗口部件 (widget)
1. 框架代码 用 PyCharm 新建一个名为 SimplePaintApp 的项目,然后新建一个名为 simple_paint_app.py 的 Python 源文件, 在代码编辑器中,输入以下框 ...
- Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)
1. 空白窗口 在 PyCharm 中创建一个名为 TutorialApp 的项目,然后在该项目中新建了个名为 tutorial_app.py 的 Python 源文件,在 PyCharm 的代码编 ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：3. 随机颜色及清除按钮
1. 随机颜色 通过前面的教程,咪博士已经带大家实现了画板的绘图功能.但是,现在画板只能画出黄色的图案,还十分单调,接下来咪博士就教大家,如何使用随机颜色,让画板变得五彩斑斓. 改进后的代码如下: f ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：2. 实现绘图功能
1. 理解 kivy 坐标系统 上一节中,咪博士带大家实现了画板程序的基础框架,以及一个基本的自定义窗口部件(widget).在上一节的末尾,咪博士留了一道关于 kivy 坐标系统的思考题给大家.通过 ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：0. 项目简介 & 成果展示
本教程咪博士将带领大家学习创建自己的窗口部件 (widget).最终,我们完成的作品是一个简易的画板程序. 当用 kivy 创建应用时,我们需要仔细思考以下 3 个问题: 我们创建的应用需要处理什么数 ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
- 【原创】React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...
- Vue2.0 【第四季】第1节 实例入门-实例属性
目录 Vue2.0 [第四季]第1节 实例入门-实例属性 第1节 实例入门-实例属性 一.Vue和Jquery.js一起使用 二.实例调用自定义方法 Vue2.0 [第四季]第1节 实例入门-实例属性 ...
随机推荐
- Ubuntu15.10 编译VLC Android（安卓）过程记录
持续更新中... 最后一次修改于 2016-03-20 15:33:45 1.必要库的安装 除基本编译环境(gcc.g++等外),需要额外安装如下的库(用于下载必要的依赖文件) (1)JDK 推荐安装 ...
- 聊聊Web App、Hybrid App与Native App的设计差异
目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...
- STM32之系统滴答定时器
一.SysTick(系统滴答定时器)概述 操作系统需要一个滴答定时器周期性产生中断,以产生系统运行的节拍.在中断服务程序里,基于优先级调度的操作系统会根据进程优先级切换任务,基于时间片轮转系统会根据时 ...
- POJ 2002 Squares 哈希
题目链接: http://poj.org/problem?id=2002 #include <stdio.h> #include <string.h> ; struct Has ...
- Servlet的一些API使用介绍
final String rootPath = getServletConfig().getServletContext().getRealPath("/"); 获取项目运行的根 ...
- 两台主机打通ssh
ssh打通基本概念:如果需要通过SSH进行远程登录,我们一般是需要手动输入密码,但如果将SSH之间的权限打通的话,就可以实现无密码登录.这对shell脚本的定时执行有很大的帮助. (一),生成秘钥,先 ...
- BZOJ 1690: [Usaco2007 Dec]奶牛的旅行
Description 作为对奶牛们辛勤工作的回报,Farmer John决定带她们去附近的大城市玩一天.旅行的前夜,奶牛们在兴奋地讨论如何最好地享受这难得的闲暇. 很幸运地,奶牛们找到了一张详细的城 ...
- uvalive 6185
高斯消元,以前从来没写过,今天的模拟比赛里面,添琦给了我一个模板! 虽然是个裸的,但是因为从来没写过,一个小细节竟然搞了我几个小时: 终于最后在小珺同志的帮助下成功a掉了,太开心了! 存一下,作为模板 ...
- ANDROID_MARS学习笔记_S03_002_设置可见性及扫描蓝牙设备
一.代码 1.xml(1)AndroidManifest.xml <uses-permission android:name="android.permission.BLUETOOTH ...
- MySQL查询原理及其慢查询优化案例分享(转)
MySQL凭借着出色的性能.低廉的成本.丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库.虽然性能出色,但所谓“好马配好鞍”,如何能够更 好的使用它,已经成为开发工程师的必修课,我们经常会从职 ...