Highcharts开发图表
1.折线图
显示一个静态的折线图，显示如下数据
| 星期 | 温度 |
|---|---|
| 周一 | 9~14 |
| 周二 | 4~10 |
| 周三 | 1~7 |
| 周四 | 4~9 |
| 周五 | 5~11 |
| 周六 | 8~13 |
| 周天 | 7~10 |
新建demo1.html
<html>
<title>demo1</title>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
$("#container").highcharts({
title: {
text: '最近一周气温'
},
xAxis: {
categories: ['周一','周二','周三','周四','周五','周六','周天']
},
yAxis: {
title: {
text: '温度(°C)'
}
},
series: [
{
name: '最高气温',
data: [14,10,7,9,11,13,10]
},
{
name: '最低气温',
data: [9,4,1,4,5,8,7]
}
]
});
});
</script>
</head>
<body>
<h1>案例1</h1>
<div id="container"></div>
</body>
</html>
运行结果：
2. 直方图
将上案例改成直方图，并在每个方块上线上温度值。
<html>
<title>2-柱状图</title>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
$("#container").highcharts({
chart: {
type: 'column'
},
title: {
text: '最近一周气温'
},
xAxis: {
categories: ['周一','周二','周三','周四','周五','周六','周天']
},
yAxis: {
title: {
text: '温度(°C)'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
rotation: -90,
format: '{y}°C',
color: '#FFFFFF',
x: 0,
y: 20,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}
},
series: [
{
name: '最高气温',
data: [14,10,7,9,11,13,10],
dataLabels: {
color: 'red' // 指定特定的属性
}
},
{
name: '最低气温',
data: [9,4,1,4,5,8,7]
}
]
});
});
</script>
</head>
<body>
<h1>案例2</h1>
<div id="container"></div>
</body>
</html>
运行结果：
3.曲线图
在第一个案例中进行修改，不显示版权信息，并将折线图更改为曲线图。
<html>
<title>3-曲线图</title>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
// 当前页面全局有效
Highcharts.setOptions({
credits: {
enabled: false, // false就是不显示
text: '北风网',
href: 'http://www.beifeng.com'
}
});
$("#container").highcharts({
chart: {
type: 'spline'
},
title: {
text: '最近一周气温'
},
xAxis: {
categories: ['周一','周二','周三','周四','周五','周六','周天']
},
yAxis: {
title: {
text: '温度(°C)'
}
},
// 不显示版权信息的一种方式
/* credits: {
enabled: false
},*/
series: [
{
name: '最高气温',
data: [14,10,7,9,11,13,10]
},
{
name: '最低气温',
data: [9,4,1,4,5,8,7]
}
]
});
});
</script>
</head>
<body>
<h1>案例2</h1>
<div id="container"></div>
</body>
</html>
运行结果：
4.带辅助线的曲线图
在第三个案例中进行修改，进行辅助线的显示、定制legend(图例)、Tooltip(数据显示框)以及数据输出(中文)。要求当鼠标移动到对应节点的时候，显示辅助线，另外要求分别显示平均最高气温和最低气温的辅助线；要求legend显示在覆盖图表，并显示在左上角；要求数据提示框同时显示最高温度和最低温度。
<html>
<title>4-曲线图</title>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script type="text/javascript">
$(function(){
// 当前页面全局有效
Highcharts.setOptions({
credits: {
enabled: false, // false就是不显示
},
lang: {
printChart: '打印',
downloadPNG: '下载PNG',
downloadJPEG: '下载JPEG',
downloadPDF: '下载PDF',
downloadSVG: '下载SVG',
contextButtonTitle: '下载'
},
// 颜色控制
colors: ['#ff7f50', '#6AF9C4', '#87cefa', '#da70d6', '#FFF263',
'#32cd32', '#6495ed', '#ff69b4', '#FF9655', '#ba55d3',
'#cd5c5c', '#ffa500', '#40e0d0', '#64E572', '#1e90ff',
'#ff6347', '#7b68ee', '#00fa9a', '#ffd700', '#6b8e23',
'#24CBE5', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0',
'#058DC7', '#50B432', '#ED561B', '#DDDF00']
});
$("#container").highcharts({
chart: {
type: 'spline'
},
title: {
text: '最近一周气温'
},
legend: {
floating: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 50,
y: 40
},
xAxis: {
categories: ['周一','周二','周三','周四','周五','周六','周天']
},
yAxis: {
title: {
text: '温度(°C)'
},
plotLines: [
{
id: 'max_t_line',
color: '#ff7f50',
width: 1,
value: 10.6,
dashStyle: 'dash',
label: {
text: '平均最高温度10.6°C',
align: 'left',
x: -5,
y: -10,
style: {
fontWeight: 'bold',
color: '#ff7f50'
}
}
},
{
id: 'min_t_line',
color: '#6AF9C4',
width: 1,
value: 5.5,
dashStyle: 'dash',
label: {
text: '平均最低温度5.5°C',
align: 'left',
x: -5,
y: -10,
style: {
fontWeight: 'bold',
color: '#6AF9C4'
}
}
}
]
},
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var line_id = 'current_x_line';
this.series.xAxis.removePlotLine(line_id);
this.series.xAxis.addPlotLine({
id: line_id,
value: this.x,
width: 2,
color: '#ffe4b5'
});
}
}
}
}
},
series: [
{
name: '最高气温',
data: [14,10,7,9,11,13,10]
},
{
name: '最低气温',
data: [9,4,1,4,5,8,7]
}
],
tooltip: {
borderColor: '#EBBA95',
borderWidth: 2,
borderRadius: 20,
shared: true,
formatter: function() {
//console.log(this);
var s = '<b>' + this.x + '</b>';
var sum = 0;
$.each(this.points, function(){
s += '<br/>' + this.series.name + ': ' + this.y + '°C';
sum += this.y;
});
s += '<br/>平均温度: ' + (sum / 2.0) + '°C';
return s;
}
}
});
});
</script>
</head>
<body>
<h1>案例4</h1>
<div id="container"></div>
</body>
</html>
运行结果：
5.饼图
显示一个饼图，要求显示如下的浏览器用户数据
| 浏览器 | 用户 |
|---|---|
| Chrome: | 1086 |
| IE: | 675 |
| Firefox: | 201 |
| Safari: | 124 |
| Opera: | 100 |
| Others: | 408 |
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
// 进行加载
var charts = new Highcharts.Chart({
chart : {
renderTo : 'container',
type: 'pie'
},
title: {
text: '浏览器使用情况'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:0.01f}%</b>({point.y})'
},
series: [{
name: '浏览器访问量',
data: [
{
name: 'Chrome',
y: 1086
},
{
name: 'IE',
y: 675
},
{
name: 'Firefox',
y: 201
},
{
name: 'Safari',
y: 124
},
['Opera', 100],
['Others', 408]
]
}]
});
});
</script>
<title>案例5</title>
</head>
<body>
<h1>案例5:浏览器使用情况(饼图)</h1>
<div id="container"></div>
</body>
</html>
运行结果：
6.饼图带详细
在第5个案例的基础上，要求点击某个浏览器扇形后，在另外一个容器中显示该浏览器具体的用户使用数据
| 浏览器 | 版本 | 用户 |
|---|---|---|
| Chrome浏览器 | chrome_v1: | 800 |
| Chrome浏览器 | chrome_v2: | 200 |
| Chrome浏览器 | chrome_v3: | 86 |
| IE浏览器 | IE_v1: | 300 |
| IE浏览器 | IE_v2: | 150 |
| IE浏览器 | IE_v3: | 200 |
| IE浏览器 | IE_v4: | 25 |
| Firefox浏览器 | Firefox_v1: | 150 |
| Firefox浏览器 | other: | 51 |
| Safari浏览器 | Safari_v1: | 50 |
| Safari浏览器 | Safari_v2: | 70 |
| Safari浏览器 | unknow: | 4 |
| Opera浏览器 | Opera: | 98 |
| Opera浏览器 | unknow: | 2 |
| Others浏览器 | Others: | 408 |
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
function showBrowserInfos(name) {
var datas = {
'Chrome': {name: 'Chrome浏览器访问量', data: [['chrome_v1', 800],['chrome_v2', 200],['chrome_v3',86]]},
'IE': {name: "IE浏览器访问量", data: [['IE_v1', 300],['IE_v2', 150],['IE_v3', 200],['IE_v4', 25]]},
'Firefox': {name: 'Firefox浏览器访问量', data: [['Firefox_v1', 150], ['other', 51]]},
'Safari': {name: 'Safari浏览器访问量', data: [['Safari_v1', 50],['Safari_v2', 70], ['unknow', 4]]},
'Opera': {name: 'Opera浏览器访问量', data: [['Opera', 98],['unknow', 2]]},
'Others': {name: '其他浏览器访问量', data: [['Others', 408]]}
};
var chart = new Highcharts.Chart({
chart: {
type: 'pie',
renderTo: 'containerInfos'
},
title: {
text: name + '浏览器使用详情'
},
series: []
});
chart.addSeries(datas[name]);
}
Highcharts.setOptions({
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:0.01f}%</b>({point.y})'
},
});
// 进行加载
var charts = new Highcharts.Chart({
chart : {
renderTo : 'container',
type: 'pie'
},
title: {
text: '浏览器使用情况'
},
plotOptions: {
pie: {
allowPointSelect: true,
point: {
events: {
click: function() {
var name = this.name;
showBrowserInfos(name);
}
}
}
}
},
series: [{
name: '浏览器访问量',
data: [
{
name: 'Chrome',
y: 1086
},
{
name: 'IE',
y: 675
},
{
name: 'Firefox',
y: 201
},
{
name: 'Safari',
y: 124
},
['Opera', 100],
['Others', 408]
]
}]
});
});
</script>
<title>案例6</title>
</head>
<body>
<h1>案例6:浏览器使用情况(饼图)</h1>
<div id="container"></div>
<div id="containerInfos"></div>
</body>
</html>
- 中国各省份用户ip访问量的展示图
{
"data": [
{
"province": "浙江省",
"user": 275
},
{
"province": "河南省",
"user": 373
},
{
"province": "河北省",
"user": 427
},
{
"province": "江西省",
"user": 238
},
{
"province": "江苏省",
"user": 240
},
{
"province": "新疆",
"user": 20
},
{
"province": "广西省",
"user": 252
},
{
"province": "广东省",
"user": 415
},
{
"province": "山西省",
"user": 237
},
{
"province": "山东省",
"user": 659
},
{
"province": "安徽省",
"user": 447
},
{
"province": "宁夏",
"user": 11
},
{
"province": "天津市",
"user": 458
},
{
"province": "四川省",
"user": 137
},
{
"province": "吉林省",
"user": 171
},
{
"province": "台湾",
"user": 3
},
{
"province": "北京市",
"user": 224
},
{
"province": "内蒙古",
"user": 69
},
{
"province": "云南省",
"user": 203
},
{
"province": "黑龙江省",
"user": 227
},
{
"province": "上海市",
"user": 891
},
{
"province": "香港",
"user": 62
},
{
"province": "青海省",
"user": 15
},
{
"province": "陕西省",
"user": 312
},
{
"province": "重庆市",
"user": 274
},
{
"province": "辽宁省",
"user": 367
},
{
"province": "贵州省",
"user": 100
},
{
"province": "西藏",
"user": 1
},
{
"province": "福建省",
"user": 582
},
{
"province": "甘肃省",
"user": 80
},
{
"province": "澳门",
"user": 3
},
{
"province": "湖南省",
"user": 450
},
{
"province": "湖北省",
"user": 386
},
{
"province": "海南省",
"user": 93
}
]
}
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/highmaps.js"></script>
<script src="js/cn-all.js"></script>
<script type="text/javascript">
String.prototype.startWith=function(str){
if(str==null||str==""||this.length==0||str.length>this.length)
return false;
if(this.substr(0,str.length)==str)
return true;
else
return false;
return true;
};
var provinceMap = {
"上海":["上海市", "cn-sh"],
"云南": ["云南省", "cn-yn"],
"内蒙古": ["内蒙古自治区", "cn-nm"],
"吉林": ["吉林省", "cn-jl"],
"四川": ["四川省", "cn-sc"],
"天津": ["天津市", "cn-tj"],
"宁夏": ["宁夏回族自治区", "cn-nx"],
"安徽": ["安徽省", "cn-ah"],
"山东": ["山东省", "cn-sd"],
"山西": ["山西省", "cn-sx"],
"陕西": ["陕西省", "cn-sa"],
"广东": ["广东省", "cn-gd"],
"广西": ["广西省", "cn-gx"],
"新疆": ["新疆维吾尔自治区", "cn-xj"],
"江苏": ["江苏省", "cn-js"],
"江西": ["江西省", "cn-jx"],
"河北": ["河北省", "cn-hb"],
"河南": ["河南省", "cn-he"],
"浙江": ["浙江省", "cn-zj"],
"海南": ["海南省", "cn-ha"],
"湖北": ["湖北省", "cn-hu"],
"湖南": ["湖南省", "cn-hn"],
"甘肃": ["甘肃省", "cn-gs"],
"福建": ["福建省", "cn-fj"],
"西藏": ["西藏自治区", "cn-xz"],
"贵州": ["贵州省", "cn-gz"],
"辽宁": ["辽宁省", "cn-ln"],
"重庆": ["重庆市", "cn-cq"],
"青海": ["青海省", "cn-qh"],
"黑龙江": ["黑龙江省", "cn-hl"],
"北京": ["北京市", "cn-bj"]
};
function cnprovincenameformatted(province) {
for (var p in provinceMap) {
if (province.startWith(p)) {
return provinceMap[p];
}
}
return null;
}
$(function(){
var visitProvinceData = "{'data':[{'province':'浙江省','user':275},{'province':'河南省','user':373},{'province':'河北省','user':427},{'province':'江西省','user':238},{'province':'江苏省','user':240},{'province':'新疆','user':20},{'province':'广西省','user':252},{'province':'广东省','user':415},{'province':'山西省','user':237},{'province':'山东省','user':659},{'province':'安徽省','user':447},{'province':'宁夏','user':11},{'province':'天津市','user':458},{'province':'四川省','user':137},{'province':'吉林省','user':171},{'province':'台湾','user':3},{'province':'北京市','user':224},{'province':'内蒙古','user':69},{'province':'云南省','user':203},{'province':'黑龙江省','user':227},{'province':'上海市','user':891},{'province':'香港','user':62},{'province':'青海省','user':15},{'province':'陕西省','user':312},{'province':'重庆市','user':274},{'province':'辽宁省','user':367},{'province':'贵州省','user':100},{'province':'西藏','user':1},{'province':'福建省','user':582},{'province':'甘肃省','user':80},{'province':'澳门','user':3},{'province':'湖南省','user':450},{'province':'湖北省','user':386},{'province':'海南省','user':93}]}";
var data = [];
$.each(eval("(" + visitProvinceData + ")").data, function(i, item){
var province = cnprovincenameformatted(item.province);
if (province) {
var cnname = province[0];
var hckey = province[1];
var value = item.user;
data.push({"hc-key":hckey, value: value, "cn-name": cnname});
}
});
// 进行加载
$("#container").highcharts('Map', {
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
pointFormat: '{point.cn-name}:<b>{point.value}</b>'
},
colorAxis: {
min: 0,
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EEEEFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series:[{
name: '中国各省份访问量图',
data: data,
mapData: Highcharts.maps["countries/cn/cn-all"],
joinBy: 'hc-key',
dataLabels: {
enabled: true,
format: '{point.cn-name}'
}
}]
});
});
</script>
<title>案例7</title>
</head>
<body>
<h1>案例7:地址使用</h1>
<!-- 进行大小控制，默认是400高度-->
<div id="container" style='height:600px'></div>
</body>
</html>
