java js highcharts_Highcharts.js -纯javasctipt图表库初体验
一.highcharts简介以及引入
highcharts作为免费提供给个人学习、个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便。在我最近完成一个需求的时候用到了它, 它的兼容性也很强,其在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML技术来绘图。我们在使用highcharts的时候只需要引入highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个,在此我们使用jQuery。
只需在你的项目中如此引用就能方便的调用它的各种函数
二.常用图表介绍
HighCharts支持图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等,在此主要介绍一下饼图,柱状图以及线性图的属性和调用方法。
首先要确保如上的代码正确引用,新建一个index.html,加入以下代码
Document
varparams={
};
$(function() {
$('.pieChart').highcharts({
chart: {
plotBackgroundColor:null,//绘制图形区域的背景颜色
plotBorderWidth:null,//边框颜色
plotShadow:true,//绘图区投影
width: params.width|| 200,//height: params.height|| 200,//margin: [0,0,0,0],
reflow:false,//自动缩放
//animation:false
},
title: {
text:'饼图'},
tooltip: {
pointFormat:'{series.name}: {point.percentage:.1f}%'},
credits: {//去掉图标
enabled:false},
plotOptions: {
pie: {
allowPointSelect:true,
cursor:'pointer',
size:params.size|| 100,//pie size
dataLabels: {
enabled:true,
color:'#000000',
connectorColor:'#000000',
format:'{point.name}:
{point.percentage:.1f} %',
distance:-5},
}
},
series: [{
type:'pie',
name:'Browser share',
data: [
['Firefox',45.0],
['IE',26.8],
{
name:'Chrome',
y:12.8,
sliced:true,
selected:true},
['Safari',8.5],
['Opera',6.2],
['Others',0.7]
]
}]
});
$('#lineChart').highcharts({
chart: {
type:'spline',
width:200,//height:200,//
animation: Highcharts.svg,//don't animate in old IE
marginRight:10,
events: {
load:function() {
}
}
},
credits: {
enabled:false},
plotOptions: {
line: {
animation:false},
series: {
animation:false}
},
title: {
text:'线性图'},
xAxis: {
type:'datetime',//dateTimeLabelFormats: { // don't display the dummy year
//second: '%H:%M:%S'
},
yAxis: {
title: {
text:'单位(Mbit/s)'},
plotLines: [{
value:0,
width:1,
color:'#808080'}] ,
min:0,
allowDecimals:false},
series: [{
name:'网站流量',
data:[ [1453443752602,30.2], [1453443753602,47.9], [1453443754602,38.2], [1453443755602,59.8], [1453443756602,43.3], [1453443757602,57.1], [1453443758602,52.2], [1453443759602,48] ]
}]
});
$('.barChart').highcharts({
chart: {
type:'column',
height:200,
width:params.width|| 250,
},
credits: {
enabled:false},
legend:{
enabled:false},
title: {
text: params.title
},
subtitle: {
text:''},
xAxis: {
categories:params.categoriesArr||['当前','周','月']
},
yAxis: {
min:0,
title: {
text: params.yUnit||'(个)'}
},
tooltip: {
headerFormat:'{point.key}
pointFormat:'
{series.name}: ' +
'
{point.y:.1f}'+'(个)'+'',
footerFormat:'
',
shared:true,
useHTML:true},
plotOptions: {
column: {
pointPadding:0.2,
borderWidth:0,
pointWidth:params.pointWidth||30 //宽度
}
},
series: params.series||[{
name: ['数量'],
data: [213,321,112]
}
]
});
});
java js highcharts_Highcharts.js -纯javasctipt图表库初体验相关推荐
- python--爬虫入门(七)urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- QuantLIb C++金融工程库初体验
QuantLib是一个有名的金融计算的C++库,能方便地用于计算许多金融模型和公式,包括简单的折现.年金.VAR甚至BS期权定价等. 本文对quantlib做了一个简单的使用初体验 源码下载 quan ...
- 360 java插件设置_360插件化方案RePlugin初体验
前天跟朋友聊天提到他们要做个跟360插件化方案类似的框架,领导让他们先了解一下360的实现思路,我也就跟着尝试了一下. RePlugin 是一套完整的.稳定的.适合全面使用的,占坑类插件化方案,由36 ...
- 零基础学习pythonrequests_requests库初体验
和urllib库相比,requests库更加深得人心,它不仅能够重复地读取返回的数据,而且还能自动确定响应内容的编码.为了能让大家直观地看到这些变化,接下来,分别使用urllib库和requests库 ...
- 电商项目 Java还是Django_Django电商平台Saleor搭建初体验
Saleor 是一个基于 Django 的前后端分离的电商网站框架,包含后端核心服务.前端又分别包含后台和前台,本文所使用操作系统为CentOS 7.官方文档目前首推的是使用 Docker启动服务,这 ...
- python图形化编程wx_慢步python,图形用户界面库:wxPython库 初体验,先建一个窗体...
慢步写文的初衷是,帮助python爱好者学习python编程.(因为慢步也知道学习不易) 今天慢步要建立一个程序的窗体.什么是窗体?慢步水平及时间有限,直接上图吧. 就是图中的"简单界面&q ...
- Google APIs .net 客户端库初体验
今天看到google api .net库的发布这条消息, 初步看了一下相关的内容,这个库对.net程序员和google服务的交互很是方便. 谷歌已经以开源形式发布了.NET APIs Client L ...
- VLFeat开源库初体验
由于一门课的课后大作业发现了vlfeat这个库,也遇到了一点小问题,所以记录下来. 1.下载VLFeat库文件 直接官网就有 http://www.vlfeat.org/download/vlfeat ...
- 微软并行库初体验之TPL
前端时间因为要做个大数据量分析,所以用C#写了个脚本跑,不过由于算法复杂度问题,初步估计需要40小时才能跑完.为了加快运算,我一开始想到了 并行计算,利用MPICH或其他类似的分布式计算框架开发,不过 ...
最新文章
- 在SQLite中使用事务
- 通过一段代码说明C#中rel与out的使用区别
- Masuit.Tools,一个免费的轮子
- relu函数为分段线性函数,为什么会增加非线性元素
- 大连交通大学计算机网络作业,计算机网络题库(大连交通大学)chapter4
- linux蜂鸣器控制实验,【Linux公开课】蜂鸣器使用、LCD背光控制、触摸屏校准、GPIO操作...
- 房贷新政或助楼市回暖 北京二手房两天涨10万
- 51单片机多线程神器:Tiny-51操作系统
- Netty第二章 2020 3-9 Netty源码之flush优化
- Ubuntu 10.10安装配置指南Ubuntu 11.10 图形安装教程
- python爬取京东商品信息代码_爬取京东商品信息
- 青海行--(7月28日)凯旋归程
- 软件工程-体系结构设计
- DynamoDB系列之--本地二级索引
- deep learning:Theano安装攻略
- 数学知识整理:二重积分
- 【数学 裴蜀定理】luogu_4549 裴蜀定理
- 小猪的Android入门之路 Day 8 part 3
- unity2d游戏开发系列教程:一、环境安装
- 等待末日, 一家6口在地窖里住9年? 被警方救出后, 前后太诡异了!
热门文章
- python刷阅读_通过python+selenium3实现浏览器刷简书文章阅读量
- mysql select db error_select error:不能用DB-library(如isql)不能用DB-library(如isql
- matlab导入txt生成曲面,求助:怎样将txt的数据导入到Matlab中并根据参数画出波形...
- mysql单源多表同步单库单表_MySQL主从复制单表或者多表
- java rmi漏洞工具_学生会私房菜【20200924】Weblogic WLS核心组件反序列化命令执行突破(CVE20182628)漏洞复现...
- 02365计算机软件基础,自考02365《计算机软件基础(二)》习题解答.pdf
- Slip.js – 在触摸屏上实现 Swipe 对列表重新排序
- HTML5结合ajax实现文件上传以及进度显示
- 点击文本框后页面变大
- React hook 中的数据获取